JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://calebjacob.com/tooltipster/css/tooltipster.css">
<script src="http://calebjacob.com/tooltipster/js/jquery.tooltipster.js"></script>
<span id="demo-html" title="<img src='http://calebjacob.com/tooltipster/images/spiderman.png' width='50' height='50' /><p style='text-align:left;'><strong>Здесь любой ваш текст</p>">Hover</span>
JavaScript
$(document).ready(function () {
$('[title]').tooltipster({
animation: 'fall', // Анимация: (fade, grow, swing, slide, fall)
arrow: true, // Показывать ли стрелочку
arrowColor: '', // Цвет стрелочки (hex code / rgb)
content: $('qwewe456'), // Содержимое по-умолчанию (string, jQuery object)
delay: 200, // задержка перед появлением
fixedWidth: 0, // Фиксированная ширина
maxWidth: 0, // Максимальная ширина
functionBefore: function (origin, continueTooltip) {
continueTooltip(); // Функции до открытия подсказки
},
functionReady: function (origin, tooltip) {
// Функция после открытия подсказки
},
functionAfter: function (origin) {
// Функция после закрытия подсказки
},
icon: '(?)', // Иконка (string)
iconDesktop: true, // Генерировать ли иконку рядом с объектом для запуска подсказки
iconTouch: false, // Генерировать ли иконку рядом с объектом для запуска подсказки для мультитач устройств
iconTheme: '.tooltipster-icon', // Класс для иконки - подсказки
interactive: false, // Закрывать ли подсказку сразу после отведения курсора. Если true - курсор можно будет водить и по самой подсказке
interactiveTolerance: 350, // На сколько долго подсказка не спрячется после отвода курсора
offsetX: 0,
offsetY: 0,
onlyOne: true, // Разрешёна ли только одна активная подсказка
position: 'top', // Где подсказка появится по-умолчанию (right, left, top, top-right, top-left, bottom, bottom-right, bottom-left)
speed: 350, // Скорость анимации
timer: 0, // Через сколько времени подсказка сама закроется
theme: '.tooltipster-default', // Цветовая схема
touchDevices: true, // Активирована для мультитач устройств
trigger: 'hover', // При каком событии открывать подсказку (hover, click, custom)
updateAnimation: true // Анимировать ли...