Тултип средствами Bootstrap 5

Тултип является одним из самых популярных и привычных элементов пользовательского интерфейса. Если какой-либо из компонентов вашего сайта не понятен пользователю интуитивно, имеет смысл использовать тултип (tooltip) или всплывающую подсказку, которая при наведении курсора мыши предоставит ему всю необходимую дополнительную информацию.

Все браузеры имеют некое подобие “встроенных” тултипов, однако они имеют довольно простой, если не сказать примитивный, внешний вид, который,ко всему этому, никак не настраивается. Именно поэтому tooltip-скрипты на jQuery или ванильном JavaScript быстро стали популярными и наиболее востребованными компонентами сайтов, которые заявляются как “дружественные пользователю”. 

Тултип в CSS-фреймворке Bootstrap

Bootstrap Tooltip давно и прочно занимает лидирующие позиции в топах подобных скриптов, поскольку изначально и всегда он входил в состав JS-компонента BS. Правда есть нюанс: до четвертой версии включительно Бутстрап предлагал свои скриптовые компоненты в формате jQuery. Они были чуть более компактны, но требовали предварительной загрузки библиотеки.

Реализация тултипов в BS4 и старше выглядела так:

$('[data-toggle="tooltip"]').tooltip();
// или
$('.tooltip').tooltip(
  // options
);

Кто бы что ни говорил, но это и просто и понятно. Но, начиная с пятой версии все скрипты в Бутстрапе переписаны на чистом или “ванильном” JavaScript. В среднем по больнице стало компактнее. Однако вызовы скриптов заметно усложнились. Конечно, все это отлично задокументировано на сайте разработчиков, так что большой проблемы для вебмастеров такое нововведение не составило.

Инициализируется компонент Bootstrap 5 Tooltip следующим образом:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(
  tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)
);
// ... или так:
const tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltipElements.forEach((el) => {
  new bootstrap.Tooltip(el);
});

Соответственно, при указании атрибута data-bs-toggle="tooltip" элемент получит тултип. Правда необходимо содержание подсказки. Его скрипт “возьмет” из атрибута title или из специализированного (и опционального) data-bs-title. Если вы используете title, то скрипт удалит этот атрибут, но вначале перенесет его значение в data-bs-title и data-bs-original-title. Делается это для того, чтобы исключить дублирование. Если же сразу укажете содержимое тултипа в атрибуте data-bs-title, все так и останется.

Кастомизируем Bootstrap Tooltip

Подключив и протестировав наш тултип, приходишь к мнению о том, что было бы неплохо поиграть с его внешним видом. Стандартный Bootstrap 5 Tooltip с белым текстом на полупрозрачном черном фоне хорош, но в некоторых случаях имеет слишком строгий и далеко не универсальный вид. 

Итак, что же мы можем сделать?

Атрибуты для тултипов

Собственно, в части кастомизации Bootstrap предлагает нам всего два атрибута:

• data-bs-placement
• data-bs-custom-class

Первый отвечает за направление всплытия подсказки и имеет четыре значения:

• top (по умолчанию)
• right
• bottom
• left

Второй атрибут позволяет нам применить к тултипу вместо .tooltip свой собственный класс и через него кастомизировать все его элементы. Как? Об этом ниже.

HTML-код

После инициализации скрипта бутстраповский тултип формируется в следующей разметке:

<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Здесь указываем текст тултипа
  </div>
</div>

Если мы использовали атрибут data-bs-custom-class, то класс родительского элемента будет изменен на пользовательный. 

CSS-стили

Далее есть два алгоритма работы:

1. “Точечно” работаем со стилями для HTML-элементов
2. Переопределяем CSS-переменные

Для первого варианта все выглядит достаточно примитивно:

.tooltip					{  }
	.tooltip-arrow			{  }
	.tooltip-arrow::before	{ border-left-color: #900important; }
	.tooltip-inner			{ color: #ccc; background: #900; }

При задействовании CSS-переменных все становится гораздо интереснее. Перечислим их всех с дефолтными значениями:

--bs-tooltip-zindex: 1080;
--bs-tooltip-max-width: 200px;
--bs-tooltip-padding-x: 0.5rem;
--bs-tooltip-padding-y: 0.25rem;
--bs-tooltip-margin: ;  // планируется к удалению
--bs-tooltip-font-size: 0.875rem;
--bs-tooltip-color: var(--bs-body-bg);  // #fff
--bs-tooltip-bg: var(--bs-emphasis-color);  // #000
--bs-tooltip-border-radius: var(--bs-border-radius); // .375rem
--bs-tooltip-opacity: 0.9;
--bs-tooltip-arrow-width: 0.8rem;
--bs-tooltip-arrow-height: 0.4rem;

Здесь уже все гораздо более гибко, и каждый визуальный аспект тултипа можно настроить под требования проекта.

Например, мы указали пользовательский класс:

<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Содержимое тултипа" data-bs-custom-class="my-tooltip">
  Некая ссылка, требующая пояснения
</a>

Тогда изменить цвет фона тултипа можно следующим образом:

.my-tooltip { --bs-tooltip-bg: var(--bs-success); }

Это изменит строгий черный фон на более казуальный и привычный синий.

Заключение

Сразу после выхода Bootstrap 5 в сети появилось множество обсуждений проблем типа “Bootstrap Tooltip not working” или “Bootstrap tooltip is not a function”. Я нашел буквально несколько ответов, где спрашивалось о версии CSS-фреймворка. А именно в этом и кроется решение, поскольку в пятой версии все скрипты переписаны на чистом JavaScript, и вызовы происходят иначе.

Итак, в нашей публикации мы решили несколько вопросов, связанных с использованием скрипта Tooltip из состава Bootstrap 5:

1. Как его правильно инициализировать.
2. Как кастомизировать разметку и стили тултипов.

В общем и целом, Bootstrap Tooltip это полезный и эффективный элемент интерфейса, позволяющий сделать ваш сайт более дружественным к пользователю. Если вы уже используете Bootstrap как в части CSS, так и в части встроенной в него библиотеки скриптов, я не вижу препятствий для того, чтобы применять и тултипы вместо подгрузки дополнительной сторонней библиотеки.