Всплывающие подсказки html: Как добавить всплывающую подсказку к изображению?

Содержание

Делаем всплывающие подсказки — пример на JavaScript + HTML

Статью будет интересно прочитать как новичкам в работе с JavaScript, так и более или менее продвинутым в этом вопросе людям. Ее цель — ознакомление читателя с принципом работы JavaScript-подсказки. В конце статьи есть краткое описание всех объектов, событий и свойств, используемых в скрипте.

В начале ознакомления с HTML создается впечатление, что в нем всего достаточно, а где-то есть даже что-то лишнее. Но по мере накопления знаний и опыта начинают возникать вопросы, ответов на которые в учебниках нет. Один из таких вопросов звучит примерно так: «а как бы украсить всплывающую подсказку?».

Иногда возникают такие ситуации, что без всплывающей подсказки никак не обойтись, а стандартные alt и title не вписываются в дизайн сайта. Как раз в таких ситуациях спасают подсказки, написанные на JavaScript.

Итак, как реализуется такая подсказка?

Для на чала необходимо понять, что такое JavaScript-подсказка. А это всего навсего блок html-кода, который двигается за курсором мыши средствами JavaScript. Один из вариантов организации такого блока — использование тега <div>. Например:

<div></div>

Параметр visibility установлен в hidden, т.к. изначально подсказка должна быть скрыта. Ширина этого блока 400 пикселей, а высота меняется в зависимости от содержимого и не меньше 10 пикселей. Также для визуального отделения подсказки от основного содержимого она обрамлена черной рамкой толщиной 1 пиксель.

Теперь нужно заставить подсказку появляться при наведении мыши на что-либо. Для примера она будет появляться и исчезать над картинкой:

<img src="ej.jpg">

То есть при наведении мыши на картинку будет вызвана функция movePic() со строковым параметром — текстом подсказки, — которая отобразит div-блок рядом с указателем мыши, а при удалении — hidePic(), которая спрячет его обратно.

Далее следует скрипт появления и скрытия подсказки. Спрятать намного проще, чем отобразить, поэтому сначала

hidePic(): function hidePic(){ //если чуть-чуть порыться в памяти или поднять глаза вверх, то можно понять, что myalt - имя блока. myalt.style.visibility="hidden";//передача параметру visibility значения hidden, блок становится невидим myalt.innerHTML="";//очищение содежимого блока myalt.style.top=0; myalt.style.left=0;//отправка блока в верхний левый угол экрана } //Теперь пришло время movePic():

function movePic(word){
myalt.innerHTML=word;//отправка в подсказку строки
myalt.style.left=window.event.clientX+5;
myalt.style.top=window.event.clientY+5;//блок находится на 5 пикселей правее и ниже курсора мыши
myalt.style.visibility="visible";//блок становится видимым
}

Этот вариант уже работает, но у него есть недостки:

если документ прокручивающийся (как это обычно и бывает), то корректно подсказка будет работать только в верхрем положении экрана, так как clientX и clientY возвращают лишь относительные координаты мышки.
если объект, над которым всплывает подсказка, расположен ближе к правому краю окна, то она вылезет за края экрана и страничка растянется.

аналогично с нижним краем.

Теперь пора исправлять недоделки. На самом деле все вышеперечисленные недостатки решаются очень легко:

достаточно определить высоту прокрученной части документа
проводится проверка на положение курсора относительно правого края.
аналогично с нижним краем.

function movePic(word){ myalt.innerHTML=word; _x=window.event.clientX; _y=window.event.clientY;//сохранение координат курсора мыши в переменные _dx=5;//смещение подскаки вправо и влево относительно координат мыши //Определение, помещается ли подсказка между курсором и краями экрана

left=false;right=false;
if(_dx+_x+myalt.clientWidth>document.body.clientWidth){_x=document.body.clientWidth-myalt.clientWidth-_dx;left=true;}
if(_dx+_y+myalt.clientHeight>document.body.clientHeight){_y=document.body.clientHeight-myalt.clientHeight-_dx;right=true;}
//если объект в нижнем правом углу, подсказка всплывает над курсором
if(left&&right)_y=document.body.clientHeight-myalt.clientHeight-_dx*4;
//помещение подсказки в найденные коородинаты
myalt.style.left=_x;
myalt.style.top=_y+document.body.scrollTop;//смещение подскази в зависимости от высоты прокрученной части документа
myalt.style.visibility="visible";
}

Обычно делают подсказку, двигающуюся за курсором мыши. Достигается это следующим образом. Во-первых функцию нужно вызывать не onmouseover, а onmousemove, и во-вторых, строка, передаваемая в функцию movePic(), должна отправляться в тело подсказки только один раз (иначе могут возникнуть разного рода блики и прочее, особенно если в подсказке будет картинка). Ниже следует целиком код документа.

<html> <head> <title>стрипт всплывающей подсказки</title> <script> var hide=true;//глобальная переменная, отвечающая будет ли строка передана в подсказку function movePic(word){ _x=window.event.clientX; _y=window.event.clientY; _dx=5 left=false;right=false; if(_dx+_x+myalt.clientWidth>document.body.clientWidth){_x=document.body.clientWidth-myalt.clientWidth-_dx;left=true;}

if(_dx+_y+myalt.clientHeight>document.body.clientHeight){_y=document.body.clientHeight-myalt.clientHeight-_dx;right=true;}
if(left&&right)_y=document.body.clientHeight-myalt.clientHeight-_dx*4;
myalt.style.left=_x;
myalt.style.top=_y+document.body.scrollTop;
if(hide){
myalt.innerHTML=word;
myalt.style.visibility="visible";
hide=false;
}
}
function hidePic(){
myalt.style.visibility="hidden";
myalt.innerHTML="";
myalt.style.top=0;
myalt.style.left=0;
hide=true;
}
</script>
<head>
<body>
<div></div>
<img src="ej.jpg" onmousemove="movePic('Это ёж. Что он делает в лесу?.. Да он и сам этого не знает!')">
 </body>
</html>

Справка:

window— объект, окно браузера;
window.event — объект, информация о событиях;
document— объект, веб-страница;
document.body — объект, тело веб-страницы;
style— объект, доступ к стилям объекта;
clientX, clientY — read-only свойства event, координаты мыши относительно рабочей области браузера;
innerHTML— read/write свойство, возвращает/устанавливает html-код между тегами объекта;

clientWidth, clientHeight — readn-only свойства, возвращают реальные ширину и высоту объекта соответственно;
scrollTop— read/write свойство, возвращает/устанавливает высоту прокрученной части объекта;
onmouseout— событие, происходящее при наведение курсора мыши над объектом;
onmousemove— событие, происходящее при движении курсора мыши над объектом;
onmouseout— событие, происодящее в момент убирания курсора мыши с объекта.

Автор статьи: Фролов Станислав.

Всплывающие подсказки · Bootstrap v5.0

Обзор

Что нужно знать при использовании плагина всплывающей подсказки:

Подсказки полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper, чтобы всплывающие подсказки работали!
Всплывающие подсказки используются по соображениям производительности, поэтому **Вы должны инициализировать их самостоятельно **.
Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
Укажите container: 'body', чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т.д.).
Всплывающие подсказки для скрытых элементов работать не будут.

Всплывающие подсказки для элементов .disabled или disabled должны запускаться для элемента оболочки.
При запуске от гиперссылок, охватывающих несколько строк, всплывающие подсказки будут центрированы. Используйте white-space: nowrap; на Ваших <a>, чтобы избежать такого поведения.
Всплывающие подсказки необходимо скрыть до того, как соответствующие элементы будут удалены из модели DOM.
Всплывающие подсказки могут запускаться благодаря элементу внутри теневой модели DOM.

По умолчанию этот компонент использует встроенное средство очистки содержимого, которое удаляет все элементы HTML, которые не разрешены явно. Дополнительные сведения смотрите в разделе очистки в нашей документации по JavaScript. По умолчанию этот компонент использует встроенное средство очистки содержимого, которое удаляет все элементы HTML, которые не разрешены явно. Дополнительные сведения смотрите в разделе очистки в нашей документации по JavaScript.

Получил все это? Отлично, посмотрим, как они работают, на некоторых примерах.

Пример: включить всплывающие подсказки везде

Один из способов инициализировать все всплывающие подсказки на странице — это выбрать их по их атрибуту data-bs-toggle:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Примеры

Наведите курсор на ссылки ниже, чтобы увидеть всплывающие подсказки:

Наведите курсор на кнопки ниже, чтобы увидеть четыре направления подсказок: вверх, вправо, внизу и влево. Направления зеркалируются при использовании Bootstrap в RTL.

<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Подсказка вверху">
  Подсказка вверху
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Подсказка справа">
  Подсказка справа
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Подсказка внизу">
  Подсказка внизу
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Подсказка слева">
  Подсказка слева
</button>

И с добавленным пользовательским HTML:

<button type="button" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Подсказка</em> <u>с</u> <b>HTML</b>">
  Всплывающая подсказка с HTML
</button>

С SVG:

Использование

Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию помещает всплывающие подсказки после их триггерного элемента.

Запуск всплывающей подсказки через JavaScript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

Переполнение

auto и scroll

Положение всплывающей подсказки пытается автоматически измениться, когда родительский контейнер имеет overflow: auto или overflow: scroll, как наш .table-responsive, но по-прежнему сохраняет исходное расположение размещения. Чтобы решить эту проблему, установите для параметра boundary значение, отличное от значения по умолчанию, 'scrollParent', например, 'window':

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: 'window'
})

Разметка

Требуемая разметка для всплывающей подсказки — это только атрибут data и title HTML-элемента, для которого Вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию плагином установлено значение top).

Создание всплывающих подсказок для пользователей клавиатуры и вспомогательных технологий

Вы должны добавлять всплывающие подсказки только к HTML-элементам, которые традиционно ориентированы на клавиатуру и являются интерактивными (например, ссылки или элементы управления формы). Хотя произвольные элементы HTML (такие как <span>) можно сделать доступными для фокусировки, добавив атрибут tabindex="0", это добавит потенциально раздражающие и сбивающие с толку позиции табуляции на неинтерактивных элементах для пользователей клавиатуры, и большинство Вспомогательные технологии в настоящее время не объявляют всплывающую подсказку в этой ситуации. Кроме того, не полагайтесь исключительно на hover в качестве триггера для Вашей всплывающей подсказки, так как это сделает невозможным запуск ваших всплывающих подсказок для пользователей клавиатуры.

<!-- HTML для записи -->
<a href="#" data-bs-toggle="tooltip" title="Текст всплывающей подсказки!">Наведите на меня</a>

<!-- Разметка, созданная плагином -->
<div role="tooltip">
  <div></div>
  <div>
    Текст всплывающей подсказки!
  </div>
</div>

Отключенные элементы

Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут сфокусироваться, навести на них курсор или щелкнуть их, чтобы вызвать всплывающую подсказку (или всплывающее окно). В качестве обходного пути Вы захотите вызвать всплывающую подсказку из оболочки <div> или <span>, в идеале сделанной с фокусировкой на клавиатуре, используя tabindex="0".

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs-, как в data-bs-animation="". Обязательно измените тип case имени опции с camelCase на kebab-case при передаче через атрибуты данных. Например: вместо использования data-bs-customClass="beautifier" используйте data-bs-custom-class="beautifier".

Обратите внимание, что по соображениям безопасности параметры sanitize, sanitizeFn и allowList не могут быть предоставлены с использованием атрибутов данных.

Наименование	Тип	По умолчанию	Описание
`animation`	boolean	`true`	Применить переход CSS fade к всплывающей подсказке
`container`	string \| element \| false	`false`	Добавляет всплывающую подсказку к определенному элементу. Пример: `container: 'body'`. Этот параметр особенно полезен тем, что позволяет Вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвратит отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.
`delay`	number \| object	`0`	Задержка показа и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера Если указан номер, задержка применяется как к скрытию, так и к отображению. Структура объекта: `delay: { "show": 500, "hide": 100 }`
`html`	boolean	`false`	Разрешить HTML во всплывающей подсказке. Если `true`, HTML-теги в `title` всплывающей подсказки будут отображаться во всплывающей подсказке. Если `false`, свойство `innerText` будет использоваться для вставки содержимого в DOM. Используйте текст, если Вас беспокоят XSS-атаки.
`placement`	string \| function	`'top'`	Как разместить всплывающую подсказку — auto \| top \| bottom \| left \| right. Если задано `auto` всплывающая подсказка будет динамически переориентирована. Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM триггерного элемента в качестве второго. Контекст `this` установлен на экземпляр всплывающей подсказки.
`selector`	string \| false	`false`	Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM (поддержка `jQuery.on`). Смотрите это и информативный пример.
`template`	string	`'<div role="tooltip"><div></div><div></div></div>'`	Базовый HTML для использования при создании всплывающей подсказки. `title` всплывающей подсказки будет вставлен в `.tooltip-inner`. `.tooltip-arrow` станет стрелкой всплывающей подсказки. Самый внешний элемент оболочки должен иметь класс `.tooltip` и `role="tooltip"`.
`title`	string \| element \| function	`''`	Значение заголовка по умолчанию, если атрибут `title` отсутствует. Если задана функция, она будет вызываться со ссылкой `this`, установленной на элемент, к которому прикреплена всплывающая подсказка.
`trigger`	string	`'hover focus'`	Как запускается всплывающая подсказка — click \| hover \| focus \| manual. Вы можете передать несколько триггеров; разделить их пробелом. `'manual'` указывает, что всплывающая подсказка будет запускаться программно через `.tooltip('show')`, `.tooltip('hide')` и методы `.tooltip('toggle')`; это значение нельзя комбинировать с другими триггерами. Само по себе `'hover'` приведет к появлению всплывающих подсказок, которые нельзя запускать с клавиатуры, и их следует использовать только при наличии альтернативных методов передачи той же информации пользователям клавиатуры.
`fallbackPlacements`	array	`['top', 'right', 'bottom', 'left']`	Определите резервные места размещения, предоставив список мест размещения в массиве (в порядке предпочтения). Для получения дополнительной информации смотрите документацию о поведении Popper.
`boundary`	string \| element	`'clippingParents'`	Граница ограничения переполнения всплывающей подсказки. По умолчанию это `'clippingParents'` и может принимать ссылку HTMLElement (только JavaScript). Дополнительную информацию смотрите в Popper документации preventOverflow.
`customClass`	string \| function	`''`	Добавляйте классы во всплывающую подсказку, когда она отображается. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: `'class-1 class-2'`. Вы также можете передать функцию, которая должна возвращать одну строку, содержащую дополнительные имена классов.
`sanitize`	boolean	`true`	Включите или отключите дезинфекцию. Если активированы параметры `'template'` и `'title'` , будут очищены. Смотрите раздел очистки в нашей документации по JavaScript.
`allowList`	object	Значение по умолчанию	Объект, содержащий разрешенные атрибуты и теги
`sanitizeFn`	null \| function	`null`	Здесь Вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если Вы предпочитаете использовать специальную библиотеку для выполнения очистки.
`offset`	array \| string \| function	`[0, 0]`	Смещение всплывающей подсказки относительно цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: `data-bs-offset="10,20"` Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение popper, ссылку и popper rects в качестве первого аргумента. Узел DOM запускающего элемента передается в качестве второго аргумента. Функция должна возвращать массив с двумя числами: `[skidding, distance]`. Дополнительную информацию смотрите в offset документации Popper.
`offset`	array \| string \| function	`[0, 0]`	Смещение всплывающей подсказки относительно цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: `data-bs-offset="10,20"` Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение popper, ссылку и popper rects в качестве первого аргумента. Узел DOM запускающего элемента передается в качестве второго аргумента. Функция должна возвращать массив с двумя числами: `[skidding, distance]`. Дополнительную информацию смотрите в offset документации Popper.
`popperConfig`	null \| object \| function	`null`	Чтобы изменить конфигурацию Popper по умолчанию для Bootstrap, смотрите конфигурацию Popper. Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Popper по умолчанию для Bootstrap. Это поможет вам использовать и объединить настройки по умолчанию с вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper.

Атрибуты данных для отдельных всплывающих подсказок

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

Использование функции с

popperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методы

show

Показывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана (то есть до того, как произойдет событие shown.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.

hide

Скрывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта (т.е. до того, как произойдет событие hidden.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки.

toggle

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (то есть до того, как произойдет событие shown.bs.tooltip или hidden.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки.

dispose

Скрывает и уничтожает всплывающую подсказку элемента (Удаляет сохраненные данные в элементе DOM). Всплывающие подсказки, использующие делегирование (которые создаются с использованием параметра selector), не могут быть уничтожены индивидуально для дочерних элементов триггера.

enable

Дает возможность отображения всплывающей подсказки элемента. Подсказки включены по умолчанию.

disable

Убирает возможность отображения всплывающей подсказки элемента. Всплывающая подсказка будет отображаться, только если она будет повторно включена.

toggleEnabled

Переключает возможность отображения или скрытия всплывающей подсказки элемента.

update

Обновляет положение всплывающей подсказки элемента.

getInstance

Статический метод, позволяющий получить экземпляр всплывающей подсказки, связанный с элементом DOM.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

События

Тип события	Описание
`show.bs.tooltip`	Это событие запускается немедленно при вызове метода экземпляра `show`.
`shown.bs.tooltip`	Это событие запускается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
`hide.bs.tooltip`	Это событие запускается сразу после вызова метода экземпляра `hide`.
`hidden.bs.tooltip`	Это событие запускается, когда всплывающая подсказка перестала быть скрытой от пользователя (будет ждать завершения переходов CSS).
`inserted.bs.tooltip`	Это событие запускается после события `show.bs.tooltip`, когда шаблон всплывающей подсказки был добавлен в DOM.

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // делайте что-нибудь...
})

tooltip.hide()

Бесплатная подборка всплывающих подсказок с использованием JQuery и CSS3

Здравствуйте, дорогие читатели блога beloweb.ru. В этот замечательный вечер я спешу представить Вам, замечательную подборку бесплатных плавно всплывающих подсказок на любой вкус и цвет с использованием CSS3 и JQuery.

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

Элегантная тёмная всплывающая подсказка на CSS и JQuery

Пример ι Скачать исходники

Подсказки (метки) для картинок на сайте

Пример ι Скачать исходники

Круглые и красивые всплывающие подсказки для картинок и для сайта

Пример ι Скачать исходники

Несколько примеров реализации всплывающих подсказок на JQuery

Пример ι Скачать исходники

Красивые и большие подсказки с JQuery

Пример ι Скачать исходники

Красивые и яркие всплывающие подсказки на CSS3

Пример ι Скачать исходники

Тёмное меню с красивыми выпадающими подсказками

Пример ι Скачать исходники

Классные подсказки с картинками

Пример ι Скачать исходники

Красивая информационная лента с плавными подсказками при наведении

Пример ι Скачать исходники

Несколько не плохих примеров реализации подсказок для ссылок

Пример ι Скачать исходники

Простая всплывающая подсказка для ссылок на сайте

Пример ι Скачать исходники

Всплывающие подсказки в стиле Фейсбука

Пример ι Скачать исходники

Большая подсказка, которая срабатывает после клика

Пример ι Скачать исходники

Всплывающая подсказка в очень светлом стиле

Пример ι Скачать исходники

Несколько больших и очень красивых всплывающих подсказок

Пример ι Скачать исходники

Всплывающие подсказки на CSS. Библиотека microtip.css

Представляем вашему вниманию отличную легковесную css библиотеку microtip.css.
Библиотека предназначена для создания всплывающих подсказок на любых элементах сайта

Установка

npm

npm install microtip

yarn

yarn add microtip

CDN

https://unpkg.com/microtip/microtip.css

Прямая загрузка

curl -o microtip https://github.com/ghosh/microtip/blob/master/microtip.css

Подключение

PostCSS

@import 'microtip';

Webpack

import microtip from 'microtip/microtip.css'

SCSS

@import ‘microtip/microtip’;

HTML

<link rel="stylesheet" href="https://unpkg.com/microtip/microtip.css">

Использование

Использовать данную библиотеку очень просто. Достаточно добавить атртибуты aria-label и role=»tooltip» к элементу, которому требуется тултип. Текст сообщения задается в атртибуте aria-label=»Ваш текст». Пример с позиционированием всплывающей подсказки:

 <button aria-label="Hey tooltip!" data-microtip-position="up" role="tooltip">

Позиционирование всплывающих подсказок

Данная библиотека позволяет выбирать местоположения для tooltip. Это решается добавлением атртибута data-microtip-position. Данный атрибут принимает следующие параметры: top, top-left, top-right, bottom, bottom-left, bottom-right, left and right.

Например:

 <button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">

Модификаторы размера

Изначально размер тултипа задается в зависимости от расположенного в нем текста. Библиотека позволяет дополнительно задать размер тултипа путем добавления data-microtip-size. Данный аттрибут принимает следующие параметры: small, medium, large, fit

Пример:

 <button aria-label="This is a decently long text!" data-microtip-position="top-left" data-microtip-size="medium" role="tooltip">

Примечание — аттрибут fit установит ширину подсказки — такую же как и ширина элемента. Данный способо работает только с позиционированием top и bottom

Кастомизация

Библиотека microtip позволяет изменять параметры своей библиотеки:

Пример::root { --microtip-transition-duration: 0.5s; --microtip-transition-delay: 1s; --microtip-transition-easing: ease-out; --microtip-font-size: 13px; --microtip-font-weight: bold; --microtip-text-transform: uppercase; }Также допустима кастомизация microtip для одного элемента: .button { --microtip-transition-duration: 0.2s; --microtip-transition-delay: 0s; --microtip-transition-easing: ease-in-out; }

Variable	Description	Default Value
`--microtip-transition-duration`	Устанавливает время анимации тултипа	`.18s`
`--microtip-transition-delay`	Задержка появления всплывающей подсказки	`0s`
`--microtip-transition-easing`	Тип анимации для появления тултипа	`ease-in-out`
`--microtip-font-size`	Размер шрифта во всплывающей подсказке	`13px`
`--microtip-font-weight`	font-weight для текста тултипа	`normal`
`--microtip-text-transform`	text-transform для текста	`none`

Проект на GitHub

40+ полезных скриптов всплывающих подсказок для CSS, JavaScript и jQuery

Автор: Елизавета Гуменюк Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!

Существует интересный элемент пользовательского интерфейса, такой как всплывающие подсказки (также называемые инфо-записями), которые создают небольшое окно с информацией об элементе, когда курсор мыши наводится на определенный текст или изображение. С точки зрения пользовательского интерфейса, всплывающие подсказки предоставляют пользователям самый быстрый и простой источник информации, без необходимости кликать на что-либо.

Хотя самый простой способ добавить всплывающие подсказки к тексту — использовать тег HTML <ACRONYM> или TITLE=””, ALT=””. Тем не менее, есть некоторые действительно интересные дизайны всплывающих подсказок и стилей, которые вы можете создавать с помощью JavaScript и CSS, используя скрипты. Давайте взглянем на них.

CSS

Balloon.css — Balloon — это библиотека CSS, состоящая из SasS и LESS и позволяющая отобразить интерактивную подсказку. Содержимое и положение всплывающей подсказки настраиваются через атрибут data. Вы можете показать всплывающую подсказку слева, справа или слева направо. Вы даже можете добавить эмоджи к контенту. Balloon.css можно установить через NPM и загрузить с CDNJS.

Simptip — сделано с помощью SasS, позволяющим перенастроить и перекомпилировать код в соответствии с вашими требованиями. Позиция и содержимое подсказки настраиваются с помощью имени класса и атрибута tooltip. Simptip доступен в виде пакета NPM, Yarn и Bower.

Hint.css — одна из популярных библиотек CSS для отображения всплывающей подсказки, Hint.css используется многими популярными веб-сайтами, такими как Fiverr, Webflow и Tridiv. В отличие от двух других библиотек CSS, Hint.css использует атрибут aria-label. Вы можете настроить размер и цвет с помощью имен классов с использованием методологии BEM. Hint.css доступен на NPM, Bower и CDNJS.

Microtip — еще одна потрясающая библиотека CSS для создания всплывающей подсказки. Microtip использует aria-label для хранения содержимого всплывающей подсказки и атрибут data для настройки размера и положения всплывающей подсказки.

Скрипт использует переменную CSS, которая позволяет настраивать всплывающую подсказку с помощью простого файла CSS. Переменные CSS уже поддерживаются во многих веб-и мобильных браузерах. Microtip доступен на NPM, Yarn и CDN UNPkg.

Wenk– весит всего 733 байт. Суперлегкая библиотека, написанная в суперсовременном CSS с использованием CSSNext, LESS и SCSS, позволяет настраивать и перекомпилировать стили так, как вам нравится. Wenk можно загрузить с NPM, Yarn и таких бесплатных CDN-сервисов, как rawgit.com и unpkg.com.

Tooltippy — другая легкая библиотека CSS размером около 1 КБ. Tooltippy включает в себя несколько готовых тем для стилизации всплывающей подсказки. Она написана с помощью препроцессора CSS под названием Stylus.

ElegantTips — эта библиотека поставляется с несколькими предварительно созданными темами, которые можно изменить с предоставленными именами классов. В отличие от других библиотек, которые полагаются на данные HTML5 или атрибут aria-label, ElegantTips требует добавления дополнительного элемента для создания всплывающей подсказки. Это позволяет вам добавить буквально любой контент в подсказку кроме простого текста.

Tootik — эта библиотека CSS предоставляет не только стили в формате CSS, LESS и SasS, а также простой в использовании графический интерфейс для настройки всплывающей подсказки. Вы можете просто скопировать и вставить HTML-код, сгенерированный этим инструментом. Это так просто.

VanillaJS

TippyJS – работающая на Popper.js, TippyJS поставляется с множеством опций для настройки всплывающей подсказки. Вы можете настроить анимацию, стрелку всплывающей подсказки, ширину, размер, тему и многое другое. Скрипт также предоставляет функции обратного вызова, с помощью которых можно выполнить функцию, когда всплывающая подсказка показана и скрыта. Эти функции делают TippyJS одной из самых мощных библиотек JavaScript в нашем списке скриптов для создания всплывающей подсказки.

Darsain Tooltip — эта библиотека обеспечивает базовую реализацию всплывающей подсказки. Тем не менее, она предоставляет обширные возможности для настройки поведения подсказки и набора имен классов для изменения внешнего вида всплывающей подсказки. Всплывающая подсказка хорошо работает в старых браузерах, таких как IE9 и, если это необходимо, и даже в IE8 с несколькими настройками.

Bubb — скрипт хорошо подходит для продвинутых пользователей JavaScript. Используя обширные API-интерфейсы, помимо отображения простого текста, вы можете программно добавить более сложный HTML-контент во всплывающую подсказку. Это довольно круто; вы можете обратиться к Документам к примерам.

Popper — содержит техническую абстракцию для создания чего-то, что появляется, как всплывающая подсказка, всплывающее окно и выпадающие списки. TippyJS использует его в качестве основы библиотеки, кроме того скрипт используется известными именами в Интернете, такими как Bootstrap, Microsoft и Atlassian.

YY Tooltip — в отличие от других библиотек, YY Tooltip не требует добавления элементов или атрибутов HTML. Она полностью работает с JavaScript, а контент, положение и цвета определены в объекте, а не в элементе HTML. Идеально подходит для использования с полным веб-приложением JavaScript.

Position.js — еще одна отличная библиотека JavaScript для создания всплывающих подсказок, Position.js предоставляет графический интерфейс для настройки функции и просто копирует, а затем вставляет созданный там код. Position.js можно использовать в сочетании с React.js или Vue.js.

Bezet Tooltip — эта библиотека предоставляет 14 вариантов отображения всплывающей подсказки; например, справа, слева, снизу, слева в центр, снизу в центр и т. д. Кроме того, она также достаточно умна, чтобы могла отрегулировать положение всплывающей подсказки на основе доступного пространства вокруг самой подсказки.

MouseTip — эта библиотека JavaScrtipt создаст всплывающую подсказку, которая будет двигаться вместе с курсором. Всплывающая подсказка настраивается с нестандартным атрибутом mousetip вместо использования атрибута data в HTML5. Mousetip доступен как модуль NPM.

Internetips — подобно MousetTip, всплывающая подсказка, генерируемая этой библиотекой, следует за положением курсора. Все настроено через объект JavaScript вместо HTML, а атрибуты также созданы для современных браузеров. Скрипт легкий и быстрый.

MTip — библиотека JavaScript для всплывающих подсказок с отличной совместимостью с браузером. Она совместима с IE8, полностью настраиваемая с помощью параметров, и вы можете добавить подсказку к любому элементу даже на img (элемент изображения).

Bubblesee — легкая библиотека JavaScript, которая обеспечивает прямую функциональность «подсказки». Легко использует библиотеку JavaScript без сложных опций для настройки вывода. Файл Sass предоставляется, если вы хотите изменить внешний вид всплывающей подсказки.

Tipfy — построенный с использованием современного синтаксиса JavaScript, ES6, Tipfy имеет размер всего 2 КБ. Библиотека предоставляет две версии файлов: tipfy.min.js, обеспечивающий сценарий с современным синтаксисом ES6 и tipfy.es5.min.js, если вам нужна совместимость со старыми браузерами. Скрипт использует атрибут data для настройки всплывающей подсказки; Например, data-tipfy-side используется для установки направления всплывающей подсказки, а использования атрибута data-tipfy-text для добавления содержимого всплывающей подсказки.

JQuery

Tooltipster — эта библиотека предоставляет обширные возможности для настройки практически любых элементов, таких как тема, анимация, сенсорная поддержка, контент, триггер открыть/закрыть и т. д. Она также предоставляет пользовательский прослушиватель событий и обратные вызовы, позволяя разработчикам расширять всплывающую подсказку с помощью пользовательских функций. Кроме того, будучи плагином jQuery, всплывающая подсказка будет работать в более раннем браузере, таком как IE6, в зависимости от используемой версии jQuery.

Protip — еще один расширенный плагин jQuery, Protip поддерживает 49 позиций, HTML для содержимого всплывающей подсказки, поддержка иконок, пользовательские обратные вызовы и многое другое. Protip предоставляет графический интерфейс, позволяющий легко настраивать всплывающую подсказку.

PowerTip — этот плагин jQuery также предлагает опции и API-интерфейсы, предоставляя разработчикам ряд различных способов реализации всплывающих подсказок. Он поддерживает клавиатурную навигацию, чтобы всплывающее окно отображалось при навигации элементов с помощью клавиатуры Tab. PowereTip доступен как модуль NPM. Он может использоваться с RequireJS и Browserify.

Accessible Aria Tooltip — плагин jQuery со встроенной функцией специальных возможностей, всплывающая подсказка предназначена для отображения диалогового окна с заголовком, многострочным текстом и кнопкой закрытия.

TipsJS — простой плагин jQuery, но он имеет довольно отличительные особенности. для заголовка.

Dark Tooltip — эта библиотека предоставляет некоторые действительно полезные функции для включения всплывающей подсказки. Например, вы можете добавить кнопку подтверждения — «Да» и «Нет», уменьшить фон во время отображения всплывающей подсказки и добавить элементы HTML в контент.

Aria Tooltip — еще одна подсказка со встроенной функцией доступности, этот плагин jQuery совместим с WAI-ARIA 1.1. Он реагирует таким образом, что вы можете предоставить различные конфигурации для разных размеров видового экрана. Aria Tooltip доступен как модуль NPM с именем t-aria-tooltip.

Toolbar.js. — в то время как другой плагин jQuery может отображать только простой текст или HTML-контент во всплывающей подсказке, этот плагин jQuery создает панель инструментов. Всплывающая подсказка будет содержать две или более ссылки с иконкой, которая обычно выполняет действие при нажатии, как и любая панель инструментов.

VueJS

V-Tooltip — это компонент Vue.js, работающий от Popper.js. Он предоставляет новую директиву с именем v-tooltip, которая может быть добавлена к любому элементу для создания всплывающей подсказки. V-tooltip может содержать контент всплывающей подсказки или параметры. Помимо пользовательской директивы v-tooltip вы также можете добавить всплывающую подсказку с помощью компонента v-popover. С помощью этого компонента вы можете добавить более сложный контент во всплывающую подсказку с компонентом Vue.js или HTML.

Vue-Bulma Tooltip — компонент Vue.js для создания всплывающей подсказки, основанной на платформе UML Bulma. Эта библиотека является частью Vue Bulma. Но компонент tooltip доступен как модуль NPM с именем vue-bulma-tooltip, который вы можете использовать как автономный компонент.

Vue-Directive-Tooltip — в целом он похож на компонент V-Tooltip на основе Popper.js и предоставляет ту же директиву, что и v-tooltip. Однако он не обеспечивает компонент v-popover.

Vue-Tippy — эта библиотека оборачивает Tippy.js в компонент Vue.js. Она имеет настраиваемую директиву Vue.js, называемую v-tippy, которая работает как атрибут HTML; вы можете добавить контент для всплывающей подсказки или параметры для ее настройки. Скрипт также отображает пользовательский компонент Vue.js в содержимом всплывающей подсказки с помощью параметра html.

VueJS-Popover — пользовательский Vue.js с настраиваемой директивой, называемой v-popover, и двумя настраиваемыми компонентами, а именно <popover> и <tooltip>, предоставляющими разработчикам возможность добавлять всплывающие подсказки в приложении Vue.js.

Vue-Hint — плагин Vue.js, который распаковыввет Hint.css. В плагине имеется директива v-hint-css для добавления всплывающей подсказки. Он предоставляет тот же набор параметров, что и Hint.css, поэтому вы можете добавить их как объект JavaScript или модификатор Vue.js.

ReactJS

React Joyride — компонент React, чтобы отобразить набор подсказок, которые помогут новым пользователям ознакомиться с вашим новым приложением.

React Floater — эта библиотека оборачивает Popper.js в компонент React с именем Floater, поэтому он обладает такими же замечательными функциями, как и у Floater. Вы можете добавить всплывающие подсказки и всплывающие окна, и вы также можете играть с этим компонентом через эту песочницу.

React Autotip — простой компонент React с функцией автоматического позиционирования, React Autotip автоматически отрегулирует положение всплывающей подсказки при изменении доступного пространства вокруг него.

React Tippy — построен на базе Tippy.js и Popover.js. В этой библиотеке представлен компонент Tooltip, который можно включить в приложение React.

React Hint — компонент React, расширяющий Hint.css. Компоненты добавляют несколько функций, недоступных в Hint.css, таких как автоматическое позиционирование, задержка и функция обратного вызова.

Больше

Ember Tooltips — компонент Ember.js для создания всплывающих подсказок, он построен на базе Popper.js. Компонент также разработан с учетом доступности и продолжает улучшаться, чтобы соответствовать требованиям 508 по данному вопросу.

D3 Tip — плагин D3.js. D3.js — это библиотека JavaScript для визуализации данных, такая как схемы, карты, диаграммы и т. д. Этот плагин позволяет вам показывать всплывающую подсказку поверх этих данных.

Всем успешной работы!

Источник

Как сделать всплывающие подсказки на HTML и CSS3 при наведении

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

Подсказки позволяют заинтересовать пользователя, а также сократить используемую область на сайте, тем самым достаточно ёмко и элегантно оформить всю необходимую информацию. Такой вариант идеально подходит к продающей странице, где необходимо максимально точно и кратко представить информацию пользователю.

К тому же, всплывающие подсказки могут быть незаменимым вариантом в крупном проекте, в котором усложнена навигация по сайту. Именно подсказки помогут решить эту проблему: к примеру, пользователь может навести на фразу или элемент сайта, а ему будет выведена краткое её обозначение. Удобно, не правда ли?

Я представляю вам очень удобный и функциональный пример, который реализован только на чистом HTML и CSS3, что несомненно является большим плюсом и гарантирует беспроблемную установку на проект любой сложности. К тому же, в нём используются современные SVG-иконки, о которых я уже писал в статье про Dashicons в WordPress.

Стоит отметить, что всплывающие подсказки в данном примере являются адаптивными (как и сами примеры), что сокращает ваше потраченное время. Именно поэтому я считаю этот вариант самым оптимальным и удобным для всех нас.

Как установить всплывающие подсказки

Как я уже говорил — установка не составит труда, так как никаких «танцев с бубном» здесь не будет.
ПРИМЕР СКАЧАТЬ

Давайте рассмотрим все тонкости установки всплывающих подсказок на примере «Растянутая». Для начала разберемся с HTML-документом, а именно с блоком <head>:

<head>

</head>

Строка 2 — уже привычный нам мета-тег для корректного отображения на Iphone. Если не знаешь что это — читай мою статью про медиа-запросы.

Строка 3-4 — подключаем необходимые стили. demo необходим для нашего демо.

Строка 5 — подключаем файл стилей для шрифта наших примеров. Точнее он необходим для корректного отображения наших SVG-иконок.

Строка 6 — подключаем таблицу стилей конкретно к нашему примеру («Растянутая»).

Собственно, всё что нам необходимо — мы подключили. Остаётся дело за малым — разобраться со структурой нашего <body>:

<body> <div> <div> <span><a title=»На сайт» target=»_blank» href=»http://www.drogin.ru»><span>Вернуться на сайт</span></a></span> </div> <div> <header> <h2>Оформление подсказок</h2> <nav> <a href=»index.html»>Классик</a> <a href=»round.html»>Круг</a> <a href=»curved.html»>Изогнутая</a> <a href=»sharp.html»>Острая</a> <a href=»bloated.html»>Растянутая</a> <a href=»box.html»>Блок</a> <a href=»comic.html»>Забавная</a> <a href=»line.html»>Линия</a> <a href=»flip.html»>Разворот</a> </nav> </header> <div> <ul> <li><a href=»#»><i></i><span>Автомобиль</span></a></li> <li><a href=»#»><i></i><span>Велосипед</span></a></li> <li><a href=»#»><i></i><span>Пассажирский самолет</a></li> <li><a href=»#»><i></i><span>Автобус</span></a></li> <li><a href=»#»><i></i><span>Истребитель</span></a></li> </ul> </div> </div> </div> </body>

<body>

<div>

<span><a title=»На сайт» target=»_blank» href=»http://www.drogin.ru»><span>Вернуться на сайт</span></a></span>

</div>

<div>

<h2>Оформление подсказок</h2>

<nav>

<a href=»index.html»>Классик</a>

<a href=»curved.html»>Изогнутая</a>

<a href=»sharp.html»>Острая</a>

<a href=»bloated.html»>Растянутая</a>

<a href=»comic.html»>Забавная</a>

<a href=»line.html»>Линия</a>

<a href=»flip.html»>Разворот</a>

</nav>

</header>

<div>

<ul>

<li><a href=»#»><i></i><span>Автомобиль</span></a></li>

<li><a href=»#»><i></i><span>Велосипед</span></a></li>

<li><a href=»#»><i></i><span>Пассажирский самолет</a></li>

<li><a href=»#»><i></i><span>Автобус</span></a></li>

<li><a href=»#»><i></i><span>Истребитель</span></a></li>

</ul>

</div>

</body>

Всё, что находится до 20 строки — нас не должно волновать, так как в том блоке находится навигация и прочие элементы, которые необходимы для удобного пользования демо. Нам интересно всё, что находится в блоке с классом dummy.

Не стоит удалять какой-либо из классов в примере, так как это приведёт к неминуемой ошибки. Если вам необходимо как либо изменить стиль любого из элементов, не прибегая к редактированию подключенных нами ранее библиотек — следует дописать свой класс или идентификатор. Как вы уже заметили, структура подсказки незамысловатая — всё реализована с помощью тегов списка ul и li. Не нужно изменять её, так как ни к чему хорошему это не приведёт.

Единственное, что следует редактировать:

<span>Автобус</span>

Данный фрагмент кода я изъял из нашего списка <li>. Именно данный фрагмент отвечает за вывод текста нашей подсказки. Вместо «Автобус» можно написать то, что вам необходимо — и готово! Аналогично изменяем и элементы списка <li> — вот вам и готовая качественная всплывающая подсказка без единого скрипта.

Вывод

Таким образом, мы получили отличный вариант всплывающих подсказок, реализованных только на HTML и CSS3. Хотелось бы отметить, что мы рассмотрели лишь 1 вариант оформления подсказок, а в демо их целых 9! Ассортимент самых разных подсказок придет по вкусу каждому веб-мастеру и не останется без внимания ваших пользователей.

Процесс установки и редактирования всплывающей подсказки не займет более 10 минут, но взамен мы получаем:

повышение поведенческого фактора;
ёмкое оформление;
возможность повышения конверсии.

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

Вконтакте

Facebook

Twitter

Google+

E-mail

Это интересно

Подписаться на новости

Всплывающие подсказки для элементов формы

Здравствуйте.

Сегодня спешим сообщить о новой возможности, которая стала доступна в новом личном кабинете нашего конструктора форм. Теперь у вас есть возможность добавлять всплывающие подсказки для элементов форм.

Раньше для подсказки можно было использовать описание к элементу формы:

Или значение по умолчанию placeholder:

Но не всегда эти способы можно было использовать. Особенно последний вариант. Он очень неудобен для пользователя: текст подсказки исчезнет из центра внимания, пользователь немного застопорится на вводе и забудет, что же требовалось указать. Поэтому в качестве альтернативы можно использовать всплывающие подсказки. Более подробно об альтернативных способах использования placeholder можно почитать здесь.

Как добавить всплывающую подсказку к элементу веб-формы?

На самом деле все очень просто. Нужно перейти к редактированию нужного элемента формы в интерфейсе нашего конструктора форм:

После чего перед вами откроются основные настройки элемента веб-формы, где вы найдете отдельное поле «Всплывающая подсказка»:

Введите нужный текст для всплывающей подсказки и нажмите на кнопку «Сохранить». Если после этого открыть форму и навести курсор на нужное поле, то вы увидите такую подсказку:

Также мы добавили возможность изменить внешний вид подсказки. Для этого перейдите во вкладку «Тема оформления». Слева появился новый раздел «Подсказки»:

Где можно изменить основные параметры всплывающего окна. Для более профессиональной настройки можно использовать пользовательский CSS.

На сегодня это все. Удачного дня!

Нативный HTML: всплывающие подсказки — Сообщество разработчиков

Как кажется, это стало темой в этой серии, я возьму компонент из пользовательского интерфейса jQuery и воссоздаю его без использования какого-либо javascript. На этот раз мы рассмотрим создание стилизованных всплывающих подсказок, вы можете использовать атрибут title , но, к сожалению, его нельзя стилизовать.

Совместимость

Я буду использовать :: after и attr () для создания этого элемента.Оба имеют полную поддержку браузера.

При поиске новых атрибутов, элементов или свойств CSS я перехожу на сайт разработчика Mozilla и предлагаю вам сделать то же самое.

::после

В CSS :: после создает псевдоэлемент, который является последним дочерним элементом выбранного элемента. Он часто используется для добавления косметического содержимого к элементу со свойством content. По умолчанию он встроен.

attr ()

CSS-функция attr () используется для получения значения атрибута выбранного элемента и использования его в таблице стилей.Его также можно использовать с псевдоэлементами, и в этом случае возвращается значение атрибута исходного элемента псевдоэлемента.

Разметка

HTML довольно прост, мы хотим поместить span вокруг слова, с которым должна быть связана всплывающая подсказка. Также мы собираемся добавить атрибут данных под названием data-tooltip , этот атрибут будет содержать текст всплывающей подсказки.

Добавление стилей

Когда дело доходит до стилизации, нас волнует только пара вещей, мы хотим, чтобы [data-tooltip] выглядел немного иначе, чтобы пользователь знал, что он может что-то делать, и мы хотим стилизовать [data-tooltip]: : после части я добавил немного анимации.Мы будем использовать [data-tooltip]: hover :: after , чтобы знать, когда должна появиться всплывающая подсказка.

Как всегда, отмечу, вы можете стилизовать это как хотите. В этом примере я придерживался стиля пользовательского интерфейса jQuery, чтобы сравнение было честным, но вы можете делать все, что вам нравится.

Плавник

Ну вот и все. Я не вел блог какое-то время, почти год, поэтому на этот раз решил заняться чем-нибудь простым. У этого метода есть несколько проблем, например, всплывающая подсказка может немного отображаться за пределами экрана, но небольшое количество JS может исправить это, нам не нужна вся библиотека.

Спасибо за чтение ❤️ 🧠 🧠 🦄🦄🦄 🧠 🧠 🧠 🧠 ❤️ ❤️ ❤️

Создание всплывающих подсказок HTML (htmlToolTip)

Когда всплывающие подсказки определены для одной или всех серий, Свойства htmlToolTip включают и определяют или отключают на основе HTML (div) стиль всплывающих подсказок для любых всплывающих подсказок диаграмм. Всплывающая подсказка для конкретной серии Свойство определяет текст, отображаемый во всплывающей подсказке.

Следующий код показывает свойства и значения по умолчанию:

 htmlToolTip: {
   включено: ложь,
   mouseMargin: 10,
   стиль: undefined,
   autoTitleFont: 'жирный 12pt без засечек',
   autoContentFont: '10pt без засечек',
   оснастка: ложь
   }

Икс

Синтаксис: создание подсказок HTML

 htmlToolTip: {
   включен: boolean1,
   mouseMargin: mnumber,
   стиль: 'sstring',
   autoTitleFont: 'tfstring',
   autoContentFont: 'cfstring',
   snap: boolean2}

где:

boolean1

Включает или отключает всплывающие подсказки на основе HTML.Допустимые значения:

true, при этом используются всплывающие подсказки на основе HTML. для всех всплывающих подсказок диаграммы.
false, который использует всплывающие подсказки стандартного стиля для всех диаграмм всплывающие подсказки. Это значение по умолчанию.

mnumber

Расстояние от верха курсора до низа всплывающей подсказки в пикселях.

‘sstring’

Определяет стиль всплывающей подсказки. Допустимые значения:

‘seriesFill’, заполняет всплывающую подсказку. фон с облегченным вариантом цвета серии.
объект или строка, определяющая свойства CSS.
не определено. Это значение по умолчанию.

‘tfstring’

Если для параметра series: tooltip установлено значение ‘auto’, используйте строку шрифта CSS для определения форматирования текста заголовка автоматической всплывающей подсказки. По умолчанию значение — полужирный шрифт без засечек, 12 пунктов.

‘cfstring’

Если для параметра series: tooltip установлено значение ‘auto’, используйте строку шрифта CSS. для определения форматирования текста содержимого автоматической всплывающей подсказки.В значение по умолчанию — «10pt Sans-Serif».

boolean2

Включает или отключает привязку всплывающих подсказок. Допустимые значения:

true, чтобы включить всплывающие подсказки.
false, чтобы отключить привязку всплывающих подсказок. Это значение по умолчанию.

boolean3

Включает или отключает липкие всплывающие подсказки. Допустимые значения:

true, чтобы включить липкие подсказки. Всплывающая подсказка скрыта только тогда, когда мышь покидает рамку диаграммы.
false, чтобы отключить липкие всплывающие подсказки. Подсказка скрыта когда мышь сдвигается с любого подступенка. Это значение по умолчанию.

Пример: создание подсказок на основе HTML

Следующий запрос генерирует на основе HTML всплывающие подсказки:

 ГРАФИЧЕСКИЙ ФАЙЛ WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US COGS_US MSRP_US
ПО PRODUCT_CATEGORY
ГДЕ PRODUCT_CATEGORY EQ "Камкордер" ИЛИ "Медиаплеер" ИЛИ "Стереосистемы"
В ФОРМАТЕ ГРАФИКА PCHOLD JSCHART
НА ГРАФИКЕ LOOKGRAPH VBAR
НА СТИЛЕ ГРАФИКА *
* GRAPH_JS
серии: [
   {series: 0, color: 'lightgreen'},
   {series: 1, color: 'tan'},
   {серия: 2, цвет: 'голубой'},
   {серия: 3, цвет: 'бежевый'},
   ],
  htmlToolTip: {enabled: true, snap: true}
*КОНЕЦ
ENDSTYLE
КОНЕЦ

На выходе всплывающие подсказки есть стрелки выноски, потому что свойство привязки включено:

следующая версия запроса форматирует цвет фона всплывающие подсказки и шрифт всплывающей подсказки для серии 0, которая имеет был установлен всплывающая подсказка: ‘auto’:

 ГРАФИЧЕСКИЙ ФАЙЛ WF_RETAIL_LITE
SUM REVENUE_US GROSS_PROFIT_US COGS_US MSRP_US
ПО PRODUCT_CATEGORY
ГДЕ PRODUCT_CATEGORY EQ "Камкордер" ИЛИ "Медиаплеер" ИЛИ "Стереосистемы"
В ФОРМАТЕ ГРАФИКА PCHOLD JSCHART
НА ГРАФИКЕ LOOKGRAPH VBAR
НА СТИЛЕ ГРАФИКА *
* GRAPH_JS
серии: [
   {series: 0, color: 'lightgreen', tooltip: 'auto'},
   {series: 1, color: 'tan'},
   {серия: 2, цвет: 'голубой'},
   {серия: 3, цвет: 'бежевый'},
   ],
  htmlToolTip: {enabled: true,
   стиль: {фон: 'лаванда'},
   autoTitleFont: 'курсив, шрифт Times New Roman, 12 пунктов',
   autoContentFont: 'жирный шрифт Verdana 10 пунктов'
  },
*КОНЕЦ
ENDSTYLE
КОНЕЦ

Вывод:

Как добавить всплывающую подсказку в HTML | Small Business

Стивен Мелендез Обновлено 16 января 2019 г.

Всплывающая подсказка — это фрагмент текста, который появляется, когда вы наводите указатель мыши на что-либо в программе.Как следует из названия, они изначально использовались для объяснения того, какие значки инструментов представлены в программах, но они также могут использоваться для других целей. Есть несколько способов создать всплывающую подсказку в HTML, языке веб-программирования, включая использование JavaScript или CSS для ее создания и использование атрибута «title» в изображении HTML.

Атрибут заголовка изображения

Почти все современные веб-сайты имеют изображения, и они обычно вставляются на страницу с помощью тега «img» .В теге «img» атрибут «src» указывает местоположение или URL-адрес изображения в Интернете. Дополнительные атрибуты могут указывать ширину и высоту изображения, и текст «alt» будет отображаться, если изображение не может быть показано. Атрибут «title» может указывать текст, который будет отображаться как всплывающая подсказка при наведении указателя мыши на изображение. Используйте это, чтобы добавить всплывающую подсказку к значку или любому другому онлайн-изображению.

Например, у вас может быть тег «img» , который выглядит как

Альтернативный текст отображается, если изображение не может быть отображено по какой-либо причине, например, если браузер не может загрузить он находится там, где он хранится. Некоторые старые браузеры также будут отображать его в виде всплывающей подсказки, если атрибут «title» отсутствует. Он также используется программами чтения с экрана, которые помогают людям с нарушениями зрения перемещаться по Интернету, поэтому рекомендуется включить по возможности замещающий текст

Обратите внимание, что пользователи смартфонов могут не видеть атрибут title, поэтому вы можете использовать другой метод всплывающей подсказки, который показывает всплывающие подсказки при касании, если это вызывает беспокойство.

Параметры всплывающей подсказки JavaScript

Вы также можете добавить всплывающую подсказку к изображению или любому другому элементу HTML, используя язык программирования JavaScript. Для этой цели вы можете использовать существующую библиотеку, и существует множество доступных библиотек с открытым исходным кодом, которые позволяют использовать всплывающие подсказки с множеством различных дизайнов.

Вы также можете написать свой собственный код JavaScript для реализации настраиваемых всплывающих подсказок. Скорее всего, вы захотите использовать события мыши JavaScript, такие как наведение мыши, которое запускается, когда вы наводите указатель мыши на что-либо, и событие mouseout, которое запускается, когда вы перемещаете его за пределы объекта, для отображения и скрытия всплывающих подсказок.Использование библиотеки кросс-браузерной разработки, такой как jQuery, может упростить задачу.

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

Возможности подсказок CSS

Также можно создавать подсказки для некоторых приложений, которые не требуют кода JavaScript, даже для функций HTML без атрибута title.

Вы можете использовать каскадные таблицы стилей, язык, используемый для стилизации HTML, для создания всплывающих подсказок, которые появляются только тогда, когда кто-то наводит курсор на определенный элемент на веб-странице. Для этого используйте псевдоселектор CSS «: hover» , который позволяет применять специальные правила стиля, когда указатель мыши помещается или зависает над этим элементом. Скорее всего, вы захотите использовать правило стиля «display: none» , когда всплывающая подсказка не должна присутствовать, и правило «display: block» , когда оно должно присутствовать, чтобы оно появлялось и исчезало при необходимости.

Использование CSS, а не JavaScript, может означать более простой код и код, с которыми будет комфортно работать большему количеству дизайнеров и разработчиков, но вы можете потерять часть гибкости JavaScript, в зависимости от того, как именно вы хотите, чтобы ваши всплывающие подсказки вели себя.

Библиотека всплывающих подсказок, всплывающих окон, раскрывающихся списков и меню

Tippy.js — это полное решение для всплывающих подсказок, всплывающих окон, раскрывающихся списков и меню для web на платформе Popper.

Это общая абстракция для логики и стиля всплывающих элементов. из потока документа и перемещаться рядом со ссылочным элементом, наложенным на верхняя часть пользовательского интерфейса.

Готовы начать? Посетите раздел «Начало работы» или просмотрите демонстрацию Характеристики Типпи ниже.

# По умолчанию

Всплывающая подсказка по умолчанию выглядит так:

Моя кнопка

Цвет фона # 333 и стрелка, указывающая на элемент, и запускается событиями mouseenter или focus , поэтому он появляется, когда зависал, фокусировался с помощью клавиатуры или касался при использовании сенсорного устройства.

С элементом кнопки в документе, например:

Вы можете инициализировать его так:

   tippy ('# myButton', {
  content: "Я всплывающая подсказка Типпи!",
});

#Placement Тултипы могут быть размещены в четырех базовых способов по отношению к опорному элементу.Дополнительно всплывающую подсказку можно смещать по оси с помощью суффикса - начало или - конец .

верхний

верхний старт

верхний конец

правый

правый старт

правый конец

нижний

нижний старт

нижний конец

левый

левый старт левый

-end

Если типпи не может поместиться в желаемое место, он перевернется на противоположное. размещение, если места мало.В приведенных выше примерах переворачивание отключен, чтобы правильно продемонстрировать каждое место размещения.

#Arrows

Стрелка, указывающая на элемент, может иметь его пропорции или форму. изменены или полностью отключены.

DefaultRoundLargeSmallWideNarrow

#Animations

Всплывающие подсказки могут иметь различные типы анимации перехода. По умолчанию это простой fade (переход непрозрачности).

Дополнительные включенные анимации

Эти анимации включены в пакет и могут быть импортированы отдельно.

сдвиг

тонкий сдвиг

крайний сдвиг

сдвиг в сторону

сдвиг в сторону слабого

сдвиг в сторону крайнего

шкала

тонкая шкала

шкала- экстремальный

перспектива

тонкая перспектива

экстремальная перспектива

# Эффект заполнения материала

Текст

#Inertia / slingshot elastic effect

Добавьте физику пружины CSS в анимацию с помощью функции синхронизации перехода .

scalecale-subtlescale-extreme

# Анимация ключевого кадра CSS

Для более продвинутого уровня вы можете использовать настоящую анимацию CSS ( правил @keyframes ), например, используя пакет animate.css :

rubberBandtada

#Duration

01000 [0, 500] [500, 0]

#Themes

Всплывающие подсказки могут иметь настраиваемый стиль.

# Включенные темы

Эти темы включены в пакет и могут быть импортированы отдельно.

lightlight-bordermaterialtranslucent

# Custom themes

С помощью темы можно применить любой CSS к шаблону.

gradientretroforest

#Triggers

Всплывающие подсказки также могут быть вызваны щелчком или фокусом событий.

ClickFocus

#Interactivity

Всплывающие подсказки могут быть интерактивными, позволяя навести на них курсор и щелкнуть внутри них.

Интерактивный

#HTML Content

Всплывающие подсказки могут содержать HTML.

HTML ContentDropdown

#Delay

Всплывающие подсказки могут задерживать скрытие или отображение после триггера.

500 [800, 0] [0, 800]

#Follow Cursor

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

DefaultHorizontalVerticalInitial

#SVGs

Всплывающие подсказки могут быть размещены на узлах SVG, где followCursor: 'initial' становится очень полезно, так как его можно разместить прямо на линии.

#Singleton

Используйте одну всплывающую подсказку для множества различных ссылочных элементов. Это позволяет вам «групповые» всплывающие подсказки с общим таймером для улучшения UX, когда элементы расположены рядом друг с другом. есть всплывающие подсказки с задержкой prop.

Одноэлементные подсказки с задержкой : 500 :

TextTextTextText

Одноэлементные подсказки для группирования задержек каждого текста: 500 :

TextTextTextText

TextTextText

Типпи может быть вложен в другой.

Уровень 0

Позволяет создать систему всплывающего меню.

# Много больше …

Список возможностей выше не является полным. Типпи способен на многое другое вещи.

Всплывающие подсказки с богатым содержанием HTML — документация amCharts 4

Всплывающие подсказки в amCharts 4 могут отображать отформатированную информацию благодаря форматированию стилей и синтаксису привязки данных, обеспечиваемому встроенным средством форматирования текста. Однако иногда мы можем пойти еще дальше: использовать бесконечные возможности форматирования, предоставляемые HTML и CSS.Этот учебник объяснит, как это сделать.

Базовая диаграмма

Начнем с довольно простой диаграммы с несколькими сериями строк, курсором и набором tooltipText для последней серии, который объединяет значения из всех трех серий в одной подсказке.

Код выглядит так:

 series3.tooltipText = `[жирный] ГОД {categoryX} [/]
----
Машины: {cars}
Мотоциклы: {мотоциклы}
Велосипеды: {bicycles} `;
series3.tooltip.pointerOrientation = "вертикальный";

Серия

 3.tooltipText = `[полужирный] ГОД {categoryX} [/]
----
Машины: {cars}
Мотоциклы: {мотоциклы}
Велосипеды: {bicycles} `;
series3.tooltip.pointerOrientation = "вертикальный";

 {
  // ...
  "серии": [{
    // ...
  }, {
    // ...
  }, {
    // ...
    "tooltipText": `[полужирный] ГОД {categoryX} [/]
----
Машины: {cars}
Мотоциклы: {мотоциклы}
Велосипеды: {bicycles} `,
    "подсказка": {
      "pointerOrientation": "vertical"
    }
  }]
}

И конечный результат:

См. Pen amCharts V4: всплывающая подсказка на основе HTML (справочная таблица) от amCharts (@amcharts) на CodePen.24419

При наведении курсора мыши на нашу диаграмму мы получаем красивую сводную всплывающую подсказку:

ПРИМЕЧАНИЕ Обратите внимание, как мы установили pointerOrientation на "вертикальный" . Это поместит нашу всплывающую подсказку прямо над точкой данных, а не сбоку от нее. Это будет важно в следующих разделах этого руководства.

Создание всплывающей подсказки для всех серий

До сих пор мы добавляли tooltipHTML (или tooltipText ) в одну серию, так что независимо от того, где находится курсор, всплывающая подсказка всегда прикрепляется к элементу данных в этой серии.

Это создает проблему, когда эта конкретная серия скрыта, например через легенду.

В попытке исправить это, мы можем попробовать добавить tooltipHTML (или tooltipText ) в каждую серию. Однако это создало бы другую проблему — вместо одной всплывающей подсказки у нас было бы несколько. Фигово.

К счастью, у нас есть настройка курсора, которая нам поможет — maxTooltipDistance .

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

Установка -1 всегда будет вызывать только одну всплывающую подсказку.

 chart.cursor.maxTooltipDistance = -1;

 chart.cursor.maxTooltipDistance = -1;

 {
  // ...
  "cursor": {
    // ...
    "maxTooltipDistance": -1
  }
}

См. Pen amCharts V4: всплывающая подсказка на основе HTML (справочная таблица) от команды amCharts (@amcharts) на CodePen.24419

Настройка содержимого HTML

К тексту SVG выше применено некоторое форматирование.Но мы хотим пойти дальше и использовать всю мощь HTML / CSS для форматирования нашего материала во всплывающей подсказке.

К счастью для нас, это возможно.

Если мы установим tooltipHTML вместо tooltipText , наша подсказка автоматически отобразит это содержимое как HTML.

Что еще более круто, мы все еще можем использовать заполнители фигурных скобок для привязки к данным:

 series3.tooltipHTML = `  ГОД {categoryX}  
<час />
<таблица>

   Автомобили 
   {автомобили} 


   Мотоциклы 
   {мотоциклы} 


   Велосипеды 
   {велосипеды} 


<час /> `;

Серия

 3.tooltipHTML = `  ГОД {categoryX}  
<час />
<таблица>

   Автомобили 
   {автомобили} 


   Мотоциклы 
   {мотоциклы} 


   Велосипеды 
   {велосипеды} 


<час /> `;

 {
  // ...
  "серии": [{
    // ...}, {
    // ...
  }, {
    // ...
    "tooltipHTML": `  ГОД {categoryX}  
<час />
<таблица>

   Автомобили 
   {автомобили} 


   Мотоциклы 
   {мотоциклы} 


   Велосипеды 
   {велосипеды} 


 `,
    "подсказка": {
      "pointerOrientation": "vertical"
    }
  }]
}

См. Pen amCharts V4: подсказку на основе HTML от amCharts (@amcharts) на CodePen.24419

Поздравляем! Теперь у нас есть всплывающая подсказка с полноценным HTML:

ПРИМЕЧАНИЕ Помните, что в начале этой статьи мы упоминали, что ориентация указателя важна? Это было из-за этого взаимодействия. Всплывающая подсказка отображается для элемента данных, находящегося под курсором. Если бы всплывающая подсказка отображалась сбоку, мы бы попытались навести в ней кнопку наведения, перейти к следующему элементу данных, что привело бы к перемещению всплывающей подсказки и ее отображению для нового элемента данных. Это фактически сделало бы нашу всплывающую подсказку недоступной.

Добавление интерактивных элементов

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

Поскольку мы уже знаем, что содержимое нашей всплывающей подсказки — это HTML, мы можем добавить тег , и он будет работать. Правильно?

Ну почти.

Нам просто нужно сделать одну крошечную вещь. По умолчанию все взаимодействия во всплывающих подсказках отключены, чтобы они не закрывали область графика.из-за этого любые интерактивные элементы, такие как кнопки, во всплывающей подсказке не будут работать.

Чтобы исправить это, мы просто продолжим и повторно включим взаимодействия на ярлыке всплывающей подсказки, который доступен через label property:

 series3.tooltip.label.interactionsEnabled = true;

 series3.tooltip.label.interactionsEnabled = true;

 {
  // ...
  "серии": [{
    // ...
  }, {
    // ...
  }, {
    // ...
    "подсказка": {
      "метка": {
        "InteractionsEnabled": true
      }
    }
  }]
}

Теперь кнопка в нашем HTML будет работать.

И, что еще более круто, события onclick , добавленные к кнопке, также сработают!

Попробуйте на живом примере ниже:

См. Pen amCharts V4: всплывающая подсказка на основе HTML (интерактивная) от amCharts (@amcharts) на CodePen.24419

Ограничения

Все было хорошо и мило. Теперь о неприятных вещах.

Есть два ограничения для подсказок на основе HTML.

Они не будут работать в браузерах Internet Explorer (Edge в порядке) и некоторых других действительно старых браузерах.Всплывающая подсказка попытается вернуться к тексту SVG в этих браузерах, поэтому вы также можете установить tooltipText в качестве средства для альтернативного содержимого.
HTML-контент не будет экспортирован в графические форматы. Обычно курсор скрывается (вместе с его всплывающими подсказками) при экспорте в изображения. Однако, если у вас есть код jinga-majinga, который отображает всплывающую подсказку и полагается на его экспорт в изображение, у вас проблемы.

Связанное содержание

всплывающая подсказка — npm

Демо

Или посмотрите на странице Github.

Сопровождающие

aronhelser Пассивный сопровождающий — принимает PR и проводит небольшое тестирование, но не исправляет проблемы и не занимается активной разработкой.

roggervalf Активный сопровождающий — принимает PR и проводит небольшое тестирование, устраняет проблемы или ведет активную разработку.

huumanoid (бездействующий)

Мы с радостью примем на помощь нового сопровождающего!

Установка

 npm установить всплывающую подсказку

или

Использование

Использование NPM

1.Требовать всплывающую подсказку после установки

 импортировать ReactTooltip из react-tooltip;

2. Добавьте data-tip = «your placeholder» к вашему элементу

Подсказка

3. Включить компонент React-Tooltip

Автономный

Вы можете импортировать node_modules / react-tooltip / dist / index.js на свою страницу. Убедитесь, что вы уже импортировали react и react-dom на свою страницу.

Опции

Примечания:

Всплывающая подсказка устанавливает type: dark place: top effect: float как атрибуты по умолчанию . Вам не нужно добавлять эти параметры, если вы не хотите изменять значения по умолчанию
Параметр, который вы установили для компонента , будет реализован во всех всплывающих подсказках на той же странице:
Параметр, который вы установили для определенного элемента, например: , повлияет только на эту конкретную подсказку

Глобальный	специальный	Тип	Значения	Описание
место	дата-место	Строка	сверху, справа, снизу, слева	размещение
тип	тип данных	Строка	темнота, успех, предупреждение, ошибка, информация, свет	тема
эффект	data-effect	Строка	поплавок сплошной	поведение всплывающей подсказки
событие	событие данных	Строка	e.грамм. нажмите	настраиваемое событие для запуска всплывающей подсказки
событие выкл.	данные-событие-выкл.	Строка	например нажмите	настраиваемое событие для скрытия всплывающей подсказки (действует только после установки атрибута события)
globalEventOff		Строка	например нажмите	глобальное событие, чтобы скрыть всплывающую подсказку (только глобально)
isCapture	data-iscapture	Bool	правда, ложь	при значении true режим распространения настраиваемого события будет захвачен.
смещение	смещение данных	Объект	сверху, справа, снизу, слева	`data-offset = "{'top': 10, 'left': 10}"` для конкретного и `смещения = {{top: 10, left: 10}}` для глобального
многострочный	многострочные данные	Bool	правда, ложь	поддерживает , для создания многострочного
имя класса	data-класс	Строка		дополнительный настраиваемый класс, можно использовать! Important для перезаписи класса по умолчанию для react-tooltip
HTML	data-html	Bool	правда, ложь	или , но см. Примечание по безопасности ниже.
задержка	скрытие задержки данных	Число		или
задержкаПоказать	данные-задержка-показать	Число		или
задержка обновления	обновление данных с задержкой	Число		или Устанавливает задержку вызова getContent, если всплывающая подсказка уже отображается и вы наводите курсор мыши на другую цель
небезопасный	null	Bool	правда, ложь	Следует ли динамически вставлять заголовок стиля в страницу (нарушает стиль-src CSP, но является удобным по умолчанию)
бордюр	граница данных	Bool	правда, ложь	Добавить белую рамку в один пиксель
textColor	цвет данных-текста	Строка	e.грамм. красный	Цвет всплывающего текста
фон Цвет	цвет фона данных	Строка	например желтый	Цвет фона всплывающего окна
бордюр Цвет	цвет границы данных	Строка	например зеленый	Цвет границы всплывающего окна — включен для границы значение
стрелка Цвет	цвет стрелки-данных	Строка	e.грамм. #fff	Цвет стрелки всплывающего окна — если не указан, будет использоваться значение `backgroundColor`
getContent	null	Функция или массив	(dataTip) => {}, [(dataTip) => {}, Interval]	Динамическое создание подсказки
послеПоказать	null	Func	(evt) => {}	Функция, которая будет вызываться после показа всплывающей подсказки, с событием, которое вызвало показ
после	null	Func	(evt) => {}	Функция, которая будет вызываться после скрытия всплывающей подсказки с событием, вызвавшим скрытие
переопределение Положение	null	Func	({left: number, top: number}, currentEvent, currentTarget, узел, место, желаемое место, эффект, смещение) => ({left: number, top: number})	Функция, которая заменяет позицию всплывающей подсказки произвольной
отключить	отключение данных-подсказок	Bool	правда, ложь	Отключить поведение всплывающей подсказки, по умолчанию — false
свиток	прокрутка данных, скрытие	Bool	правда, ложь	Скрыть всплывающую подсказку при прокрутке, по умолчанию истинно
изменить размер	null	Bool	правда, ложь	Скрыть всплывающую подсказку при изменении размера окна, по умолчанию истинно
обертка	null	Строка	дел, пролёт	Выбор элемента оболочки для всплывающей подсказки, по умолчанию — div
кликабельно	null	Bool	правда, ложь	Позволяет всплывающей подсказке реагировать на события мыши (или касания), по умолчанию — false

Записка по безопасности

Параметр html позволяет всплывающей подсказке напрямую отображать необработанный HTML.Это угроза безопасности, если какой-либо контент предоставляется пользователем. Любой пользовательский контент должен быть очищен с помощью такого пакета, как sanitize-html. Мы решили не включать дезинфекцию после того, как обнаружили, что она слишком увеличила размер нашего пакета — мы не хотим наказывать людей, которые не используют опцию html .

Примечание

data-tip необходим, потому что находит всплывающую подсказку через этот атрибут
data-for соответствует id из
При использовании компонента React в качестве всплывающей подсказки у вас может быть много на странице, но у них должен быть другой идентификатор s

Статические методы

ReactTooltip.скрыть (цель)

Скрыть всплывающую подсказку вручную, цель является необязательной, если цель не передана, все существующие всплывающие подсказки будут скрыты

 импортировать ReactTooltip из react-tooltip

 this.fooRef = ref} data-tip = 'tooltip'>

ReactTooltip.rebuild ()

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

ReactTooltip.показать (цель)

Показать конкретную подсказку вручную, например:

 импортировать ReactTooltip из react-tooltip

 this.fooRef = ref} data-tip = 'tooltip'>

Поиск и устранение неисправностей

1. Использование всплывающей подсказки в модальном окне (например, в режиме реакции)

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

Поместите вне
Используйте ReactTooltip.rebuild () при открытии модального
Если z-index вашего модального окна оказывается выше, чем у всплывающей подсказки, используйте атрибут className , чтобы настроить z-index

Я предлагаю всегда помещать в самый высокий уровень или интеллектуальный компонент Redux, поэтому вам могут понадобиться эти статические способ управления поведением всплывающей подсказки в некоторых ситуациях

2.Скрыть всплывающую подсказку, когда getContent возвращает undefined

Когда вы установите getContent = {() => {return}} , вы увидите, что во всплывающей подсказке будет отображаться true . Это потому, что React автоматически установит значение data- * равным true, если значение для установки не существует. Поэтому в этой ситуации вам нужно установить data-tip = '' .

  
 {return null}} />

То же самое для пустых дочерних элементов, если вы не хотите показывать всплывающую подсказку, когда дочерние элементы пусты

{}

3.Подсказка не привязана к динамическому контенту

При рендеринге перед динамическим содержимым и использовании атрибутов data-for = {id} для нового динамического содержимого всплывающая подсказка не регистрирует свой прослушиватель событий.

Например, вы визуализируете общую всплывающую подсказку в корне вашего приложения, а затем загружаете асинхронно список содержимого. Элементы в списке используют атрибут data-for = {id} для привязки всплывающей подсказки при наведении курсора. Поскольку всплывающая подсказка уже просканирована на предмет подсказки, эти новые элементы не сработают.

Одним из способов решения этой проблемы является запуск ReactTooltip.rebuild () после загрузки данных для повторного сканирования атрибута, чтобы разрешить подключение к событию.

Пример

 <приложение>
  
  <список />

const dynamicList = (props) => {

 useEffect (() => {
        ReactTooltip.rebuild ();
    });

возвращаться(
  <список>
    {data.map ((item) => {
       Данные, запускаемые моей всплывающей подсказкой с поздним связыванием 
    });}
  
);
};

Статья

Как я вставляю sass в компонент React

Вклад

Мы приветствуем ваш вклад! Разветвите репо, внесите некоторые изменения, отправьте запрос на перенос! В нашем документе есть некоторые подробности.

Лицензия

MIT

Компонент

React Tooltip — Material-UI

Всплывающие подсказки отображают информативный текст, когда пользователь наводит курсор, фокусируется на элементе или нажимает на него.

При активации всплывающие подсказки отображают текстовую метку, идентифицирующую элемент, например, описание его функции.

Простые подсказки

Позиционированные всплывающие подсказки

Всплывающая подсказка имеет 12 мест размещения вариантов. У них нет стрелок направления; вместо этого они полагаются на движение, исходящее от источника, чтобы передать направление.

left-start
left
left-end

right-start

right

right-end

bottom-startbottomottom-end

Настроенные всплывающие подсказки

Вот несколько примеров настройки компонента.Вы можете узнать больше об этом в отменяет страницу документации.

Всплывающие подсказки со стрелками

Вы можете использовать опору arrow , чтобы дать всплывающей подсказке стрелку, указывающую, к какому элементу она относится.

Arrow

Пользовательский дочерний элемент

Всплывающая подсказка должна применить прослушиватели событий DOM к своему дочернему элементу. Если дочерний элемент является настраиваемым элементом React, вам необходимо убедиться, что он распространяет свои свойства на базовый элемент DOM.

  const MyComponent = React.forwardRef (function MyComponent (props, ref) {
  
  return  Bin 
});




  <Мойкомпонент>

Вы можете найти аналогичную концепцию в руководстве по компонентам упаковки.

Триггеры

Вы можете определить типы событий, которые вызывают показ всплывающей подсказки.

Наведите курсор или коснитесь

Сфокусируйте или коснитесь

Наведите указатель мыши

Управляемые всплывающие подсказки

Вы можете использовать свойства open , onOpen и onClose для управления поведением всплывающей подсказки.

Контролируемый

Переменная ширина

Подсказка по умолчанию переносит длинный текст, чтобы сделать его читабельным.

Ширина по умолчанию [300 пикселей] Пользовательская ширина [500 пикселей] Без переноса

Интерактивный

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

Интерактивный

Отключенные элементы

По умолчанию отключенные элементы, такие как

Если вы не обертываете компонент Material-UI, который наследуется от ButtonBase , например, собственный элемент

  
  
    <кнопка отключена = {отключена} style = {отключена? {pointerEvents: "none"}: {}}>
      {'Отключенная кнопка'}

Переходы

Используйте другой переход.

Отображение и скрытие

Всплывающая подсказка обычно отображается сразу при наведении указателя мыши на элемент и сразу же скрывается, когда указатель мыши уходит.Задержку отображения или скрытия всплывающей подсказки можно добавить с помощью свойств enterDelay и leaveDelay , как показано в демонстрации контролируемых всплывающих подсказок выше.

На мобильных устройствах всплывающая подсказка отображается, когда пользователь долго нажимает элемент и скрывается после задержки в 1500 мс. Вы можете отключить эту функцию с помощью свойства disableTouchListener .

[500 мс, 200 мс]