Кастомный tootip с помощью CSS и jQuery

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