Получить профессию в Skypro
Позиционирование tooltip относительно курсора в HTML/CSS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Создавайте динамическую подсказку с фиксированным положением, в реальном времени обновляя её координаты left и top, последовательно применяя значения pageX и pageY при перемещении курсора:
document.addEventListener('mousemove', event => {
const tooltip = document.getElementById('tooltip');
tooltip.style.left = `${event.pageX}px`;
tooltip.style.top = `${event.pageY}px`;
tooltip.style.display = 'block';
});Таким образом, ваша подсказка будет следовать за указателем, непрерывно обновляя своё положение на экране. Чтобы создать небольшой отступ между курсором и подсказкой, скорректируйте значения pageX и pageY.
Продвинутые настройки подсказок
Смещение и отображение подсказки
Добавим подсказке немного смещения, чтобы минимизировать вероятность наложения на другие элементы интерфейса:
const xOffset = 10;
const yOffset = 20;
document.addEventListener('mousemove', event => {
const tooltip = document.getElementById('tooltip');
tooltip.style.left = `${event.pageX + xOffset}px`;
tooltip.style.top = `${event.pageY + yOffset}px`;
});Гарантируем, что подсказка отображается только при необходимости:
#tooltip {
display: none;
position: fixed;
z-index: 1000;
}
.element:hover + #tooltip {
display: block;
}
Ограничение области подсказки
Позаботимся о том, чтобы подсказка не выходила за пределы видимой области экрана:
document.addEventListener('mousemove', event => {
const tooltip = document.getElementById('tooltip');
const rightEdge = window.innerWidth – tooltip.offsetWidth;
const bottomEdge = window.innerHeight – tooltip.offsetHeight;
tooltip.style.left = `${Math.min(event.pageX + xOffset, rightEdge)}px`;
tooltip.style.top = `${Math.min(event.pageY + yOffset, bottomEdge)}px`;
});Содержимое и отделка подсказки
Обогатим подсказки стильной отделкой и полезной информацией:
const tooltipContent = "<strong>Информация о цветке:</strong> <em>Ароматный</em>";
tooltip.innerHTML = tooltipContent;Вот так может выглядеть приятный внешний вид подсказки:
#tooltip {
background-color: #fffced;
border: 1px solid #f5e6a8;
border-radius: 6px;
padding: 8px;
white-space: nowrap;
}Интеракция с элементами на странице
Сделаем подсказку взаимодействующей с элементами на странице:
<a href="#" data-tooltip-content="Подробнее об этом разделе">О нас</a>document.querySelectorAll('[data-tooltip-content]').forEach(element => {
element.addEventListener('mouseenter', event => {
const tooltip = document.getElementById('tooltip');
tooltip.innerHTML = event.target.getAttribute('data-tooltip-content');
tooltip.style.display = 'block';
});
element.addEventListener('mouseleave', () => {
const tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
});
});Визуализация
Вообрази подсказку как бабочку (🦋), всегда следующую за положением курсора:
Курсор (🖱️) движется по экрану:
[🖱️........🌸........🌺........]
Где бы он ни был, "бабочка" (🦋) следует за ним:
[....🦋....🖱️....🦋....🖱️....]
При наведении на 🌸 "бабочка" предоставляет необходимую **информацию**.Правильное позиционирование подсказки гарантирует её доступность в непосредственной близости от курсора. 🖱️+🦋=💡
Усовершенствование подсказки
Контроль переполнения и управление Z-индексом
Этими свойствами CSS можно улучшить поведение подсказки, сделав её расположение более гармоничным и контент видимым:
#tooltip {
overflow: hidden;
z-index: 1000;
}Относительное позиционирование элемента поможет правильно расположить абсолютно позиционированные дочерние элементы.
Эмодзи и символы юникода
Добавьте в подсказки эмодзи или символы юникода для большей наглядности:
<div data-tooltip-content="✅ Отметить как выполненное">Задача</div>Псевдоэлементы CSS
Псевдоэлемент ::after позволяет создавать подсказки без использования JavaScript:
.element:hover::after {
content: attr(data-tooltip-content);
position: absolute;
display: block;
/* Дополнительное оформление */
}Оптимизация для различных устройств
Подсказки должны эффективно работать и на сенсорных устройствах:
element.addEventListener('touchstart', showTooltipFunction);
element.addEventListener('touchend', hideTooltipFunction);Как видите, ваша подсказка обеспечит комфортный опыт использования при работе с любым типом устройств.
Полезные материалы
- CSS Tooltip — руководство по созданию подсказок с эффектом наведения.
- События мыши — обучение работе с событиями мыши для динамичного позиционирования.
- Popper – движок позиционирования — применение Popper.js для динамического расположения элементов.
- Tooltip | jQuery UI — создание динамических подсказок с помощью плагина jQuery UI.
- Подсказки и переключатели — обеспечение доступности и полезные рекомендации по использованию.