Создаём tooltip с копированием в буфер!

Наводим — появляется текст. Кликаем — копируем и показываем «Copied!».

Создаём tooltip-элемент и добавляем в DOM. Находим нужный элемент и создаём подсказку внутри него.

const el = document.querySelector(".copy-tooltip");
const tooltip = document.createElement("div");
el.appendChild(tooltip);

Появление текста и копирование разделены для ясности.

el.addEventListener("mouseenter", () => {
  tooltip.textContent = "Click to copy";
});
el.addEventListener("click", () => {
  tooltip.textContent = "Copied!";
  navigator.clipboard.writeText(el.dataset.copy);
});

Убираем текст при уходе мыши, очищаем подсказку.

el.addEventListener("mouseleave", () => {
  tooltip.textContent = "";
});

🔥 Работает на любом элементе с data-copy, не требует стилей или библиотек.

📣 Code Ready | #практика

🤔 Слишком поздно заходить в IT в 2025?

Врать не буду: скорее да, чем нет — за последние пять лет порог вхождения сильно поднялся, и теперь нередко от джуна требуют навыки грейдом выше.

Что делать в такой ситуации? Учиться эффективнее остальных и знать, как подать себя на рынке других. Разобраться со всем этим вам поможет База Знаний — мест, где за вас уже отобрали лучшие материалы по самым востребованным вакансиям:

🖥 Python Dev: 1558+ материалов

👩‍💻 Frontend Dev: 1241+ материалов

👩‍💻 Backend Dev: 1095+ материалов

📊 Data Scientist: 978+ материалов

🎨 UX/UI Designer: 885+ материалов

📖 Книги по IT: 779+ материалов

Советую перейти и начать учиться уже сейчас — так уже к лету сможете претендовать на вакансию c хорошим окладом 👍

👩‍💻 Рассмотрим scrollbar-gutter — сохраняем макет при появлении скроллбара!

Свойство scrollbar-gutter решает проблему с «прыгающей» шириной контента при появлении или скрытии скроллбара.

Есть 3 возможных значения:

• auto — дефолтное значение.

• stable — отступ для скроллбара появляется если значение overflow равно hidden, scroll или auto, вне зависимости от того, вызывает контент переполнение или нет.

• stable both-edges — то же самое что и stable, но отступы будут создаваться с двух противоположных сторон.

Контент остаётся на месте, независимо от того, есть скролл или нет. Особенно полезно на десктопах.

📣 Code Ready | #свойство