Tooltips

Обзор

Что следует знать при использовании плагина всплывающих подсказок:

• Всплывающие подсказки зависят от сторонней библиотеки Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать тот, bootstrap.bundle.min.js который содержит Popper.
• Всплывающие подсказки доступны по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.
• Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
• Укажите container: 'body', чтобы избежать проблем с рендерингом в более сложных компонентах (таких как наши группы ввода, группы кнопок и т.д.).
• Запуск всплывающих подсказок для скрытых элементов не будет работать.
• Всплывающие подсказки для элементов .disabled or disabled должны запускаться на элементе-оболочке.
• При запуске по гиперссылкам, занимающим несколько строк, всплывающие подсказки будут центрироваться. Используйте white-space: nowrap; на вашем <a> компьютере, чтобы избежать такого поведения.
• Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.
• Всплывающие подсказки могут запускаться благодаря элементу внутри shadow DOM.

Все понял? Отлично, давайте посмотрим, как они работают, на нескольких примерах.

Примеры

Включить всплывающие подсказки

Как упоминалось выше, вы должны инициализировать всплывающие подсказки, прежде чем их можно будет использовать. Один из способов инициализировать все всплывающие подсказки на странице - выбрать их по их data-bs-toggle атрибуту, например:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Всплывающие подсказки по ссылкам

Наведите курсор мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:

Текст-заполнитель для демонстрации некоторых встроенных ссылок со всплывающими подсказками. Теперь это просто заполнитель, а не убийца. Содержимое, размещенное здесь, просто имитирует наличие реального текста. И все это только для того, чтобы дать вам представление о том, как будут выглядеть всплывающие подсказки при использовании в реальных ситуациях. Надеюсь, теперь вы увидели, как эти всплывающие подсказки по ссылкам могут работать на практике, когда вы используете их на своем собственном сайте или проекте.

<p class="muted">Текст-заполнитель для демонстрации некоторых <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">встроенных ссылок</a> с подсказками. Теперь это просто наполнитель, а не убийца. Содержимое, размещенное здесь только для имитации присутствия <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">реального текста</a>. И все это просто для того, чтобы дать вам представление о том, как будут выглядеть всплывающие подсказки при использовании в реальных ситуациях. Надеюсь, теперь вы увидели, как <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">эти всплывающие подсказки по ссылкам</a> могут работать на практике, если вы используете их на <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">свой собственный</a> сайт или проект.</p>

Пользовательские всплывающие подсказки

Добавлено в версии 5.2.0

Вы можете настроить внешний вид всплывающих подсказок, используя CSS переменные. Мы устанавливаем пользовательский класс с помощью data-bs-custom-class="custom-tooltip" для определения нашего пользовательского внешнего вида и используем его для переопределения локальной CSS переменной.

сайт/ресурсы/scss/_component-examples.scss

.custom-tooltip {
  --bs-tooltip-bg: var(--bd-violet-bg);
  --bs-tooltip-color: var(--bs-white);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="Эта верхняя всплывающая подсказка оформлена с помощью переменных CSS..">
  Пользовательская всплывающая подсказка
</button>

Инструкции

Наведите указатель мыши на кнопки ниже, чтобы увидеть четыре направления всплывающих подсказок: сверху, справа, снизу и слева. Направления зеркально отображаются при использовании Bootstrap в RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Всплывающая подсказка сверху
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Всплывающая подсказка справа
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Всплывающая подсказка снизу
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Всплывающая подсказка слева
</button>

И с добавлением пользовательского HTML:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Подсказка с HTML
</button>

С SVG:

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к CSS-переменным, во всплывающих подсказках теперь используются локальные CSS-переменные на .tooltip для расширенной настройки в режиме реального времени. Значения для переменных CSS устанавливаются через Sass, поэтому настройка Sass также по-прежнему поддерживается.

scss/_tooltip.scss

--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};

Переменные Sass

scss/_variables.scss

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     var(--#{$prefix}body-bg);
$tooltip-bg:                        var(--#{$prefix}emphasis-color);
$tooltip-border-radius:             var(--#{$prefix}border-radius);
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    null; // TODO: remove this in v6
$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Устарело в Bootstrap 5.2.0 для переменных CSS.
// fusv-enable

Использование

Плагин всплывающих подсказок генерирует содержимое и разметку по запросу и по умолчанию размещает всплывающие подсказки после их триггерного элемента. Запускает всплывающую подсказку с помощью JavaScript:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  boundary: document.body // or document.querySelector('#boundary')
})

Разметка

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

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Наведите на меня курсор</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-auto" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Какой-то текст всплывающей подсказки!
  </div>
</div>

Отключенные элементы

Элементы с атрибутом disabled не являются интерактивными, что означает, что пользователи не могут сфокусироваться, навести курсор или щелкнуть по ним, чтобы вызвать всплывающую подсказку (или всплывающее окно). В качестве обходного пути вам захочется запустить всплывающую подсказку из оболочки <div> или <span>, в идеале с возможностью фокусировки на клавиатуре с помощью tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Кнопка отключена</button>
</span>

Опции

Поскольку параметры могут передаваться через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". При передаче параметров через атрибуты данных обязательно измените тип регистра имени опции с “camelCase” на “kebab-case”. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный атрибут зарезервированных данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Если элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", конечным title значением будет 456, а отдельные атрибуты данных будут переопределять значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Конечный объект конфигурации является объединенным результатом data-bs-config, data-bs-, и js object где последнее заданное значение ключа переопределяет остальные.

Использование функции с popperConfig

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методы

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

События

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // do something...
})

tooltip.hide()