Задача – добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их и так подключено много (но ни в одной нет 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