JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<link rel="stylesheet" href="http://imapo.ru/css/jquery.powertip.css">
<script src="http://imapo.ru/js/jquery.powertip.min.js"></script>
<a href="http://apo-ucoz.com" title="Забегайте на apo-ucoz">Я - ссылка</a>
<br/><br/>
<div id="apoid">Блок с подсказкой</div>
<br/><br/>
<div id="apoid2" title="Я - подсказка после клика">Подсказка при клике</div>

JavaScript

$('a[title]').powerTip({
    followMouse: false, // Следовать зак курсором? (true, false)
    placement: 's', // Положение подсказки (n, e, s, w, nw, ne, sw, se, nw-alt, ne-alt, sw-alt,  se-alt)
    smartPlacement: true, // Автоматическое позиционирование подсказок
    offset: 10, // Отступ родсказки от элемента, если включена опция "Следовать за курсором"
    fadeInTime: 300, // Скорость появления подсказки
    fadeOutTime: 500, // Скорость исчезания подсказки
    closeDelay: 500, // Задержка перед закрытием подсказки
    intentPollInterval: 300, //Задержка перед появлением подсказки
    intentSensitivity: 7, // Чувствительность при приближении к элементу
    manual: false, // (true, false)
    mouseOnToPopup: true // Не убирать подсказку при наведении на неё (true, false)
});

$('#apoid').powerTip({smartPlacement: true}).data('powertip', 'В этой подсказке <b>свой</b> текст');

$('#apoid2').click(function() {
$(this).powerTip({manual: true}).powerTip('show');
});