Задача – добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их и так подключено много (но ни в одной нет tooltips).
Решение – создать свой кастомный тултип на основе jQuery и CSS. Придумывать сам не буду его, найду какие-то решения в сети и просто подстрою под свои требования.
Весь код, все классы просто для примера, если разобрать логику работы, то можно использовать свои классы и свою верстку.
После перечисления нужных частей разберем немного код на части.
Пример HTML (самый примитивный пример для понимания):
<h2>Lorem ipsum dolor sit <a class="link-tooltip" href="#" title="link to source">amet consectetur</a> adipisicing elit. Quae reiciendis aspernatur facere! Magnam delectus facere vitae, blanditiis dolorum dicta optio?</h2> <h2>A, <a class="link-tooltip" href="#" title="Lorem ipsum dolor sit amet consectetur adipisicing elit.">ad architecto illo</a> aut labore eos vitae quae beatae.</h2>
Максимально упрощенный CSS, без украшательств, только то, что нужно для нашего tooltip
:
.tooltip-custom { position: absolute; z-index: 999; left: -9999px; background-color: #fff; padding: 7px 10px; border: 1px solid blue; border-radius: 5px; width: auto; max-width: 250px; }
И код скрипта, который подключается обязательно после подключения jQuery:
function showTooltip(targetItems, name){ $(targetItems).each(function(i){ var badgeDescription = $(this).attr('title'); $('body').append("<div class='"+ name +"' id='"+ name + i +"'>"+ badgeDescription +"</div>"); var tooltip = $('#'+name+i); $(this).removeAttr("title").mouseenter(function(){ tooltip.css({opacity:0.9, display:'none'}).fadeIn(); }).mousemove(function(kmouse){ tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15}); }).mouseleave(function(){ tooltip.fadeOut(); }); }); } $(document).ready(function(){ showTooltip('.link-tooltip', 'tooltip-custom'); });
Разберем немного код для понимания.
В HTML в примере у нас есть ссылка с классом link-tooltip
и с каким-то title
.
<a class="link-tooltip" href="#" title="link to source">amet consectetur</a>
Когда страница загружена, запускается наша функция:
showTooltip('.link-tooltip', 'tooltip-custom');
В этой функции передаются 2 параметра:
'.link-tooltip'
– это элементы для которых показывать тултипы.
'tooltip-custom'
– это блок с тултипом, внутри которого будет текст подсказки
Разберем функцию showTooltip()
Сначала из каждой ссылки получаем title
и для каждой ссылки в самом конце body
создаем отдельный тултип, который с помощью CSS спозиционирован абсолютно за пределами экрана.
var badgeDescription = $(this).attr('title'); $('body').append("<div class='"+ name +"' id='"+ name + i +"'>"+ badgeDescription +"</div>");
В DOM сформируются блоки с текстом подсказок в таком формате:
<div class="tooltip-custom" id="tooltip-custom0">link to source</div> <div class="tooltip-custom" id="tooltip-custom1">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
Небольшое отступление – что в переменную badgeDescription
можно передать любой текст из любого места, не обязательно это должен быть title
.
Затем получаем все наши тултипы:
var tooltip = $('#'+name+i);
И затем, при наведении на нужный элемент, скрываем title
и выводим его тултип.
Tooltip
выводится таким образом, что при наведении на элемент, блок с подсказкой позиционируется абсолютом возле курсора.
mouseenter
вызывается, когда мы впервые наводим на ссылку, показываем подсказку-tooltip;mousemove
вызывается, когда мы перемещаем мышь над ссылкой, подсказка-tooltip отображается возле курсора при перемещении оного в границах объекта;mouseleave
вызывается, когда мышь «уходит» с сылки, и тогда скрываем подсказку.
Пример работы кастомного тултипа:
See the Pen Custom tooltip with jQuery and CSS by Denis (@deniscreative) on CodePen.dark