Всплывающее окно при наведении css: Всплывающая подсказка на CSS | htmlbook.ru

Leave a Comment / Css / By alexxlab / 07.02.2023

Содержание

Всплывающие подсказки · Bootstrap v5.0

Обзор

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

Подсказки полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper, чтобы всплывающие подсказки работали!
Всплывающие подсказки используются по соображениям производительности, поэтому **Вы должны инициализировать их самостоятельно **.
Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
Укажите container: 'body', чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т.д.).
Всплывающие подсказки для скрытых элементов работать не будут.
Всплывающие подсказки для элементов .disabled или disabled должны запускаться для элемента оболочки.

При запуске от гиперссылок, охватывающих несколько строк, всплывающие подсказки будут центрированы. Используйте white-space: nowrap; на Ваших <a>, чтобы избежать такого поведения.
Всплывающие подсказки необходимо скрыть до того, как соответствующие элементы будут удалены из модели DOM.
Всплывающие подсказки могут запускаться благодаря элементу внутри теневой модели DOM.

По умолчанию этот компонент использует встроенное средство очистки содержимого, которое удаляет все элементы HTML, которые не разрешены явно. Дополнительные сведения смотрите в разделе очистки в нашей документации по JavaScript.

Получил все это? Отлично, посмотрим, как они работают, на некоторых примерах.

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

Один из способов инициализировать все всплывающие подсказки на странице — это выбрать их по их атрибуту data-bs-toggle:

var tooltipTriggerList = []. slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Примеры

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

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

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

<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Подсказка вверху">
  Подсказка вверху
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Подсказка справа">
  Подсказка справа
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Подсказка внизу">
  Подсказка внизу
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Подсказка слева">
  Подсказка слева
</button>

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

<button type="button" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Подсказка</em> <u>с</u> <b>HTML</b>">
  Всплывающая подсказка с HTML
</button>

С SVG:

Sass

Переменные

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   . 9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;
$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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

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

Запуск всплывающей подсказки через JavaScript:

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

Переполнение

auto и scroll

Положение всплывающей подсказки пытается автоматически измениться, когда родительский контейнер имеет overflow: auto или overflow: scroll, как наш .table-responsive, но по-прежнему сохраняет исходное расположение размещения. Чтобы решить эту проблему, установите параметр boundary (для модификатора переворота, использующего параметр popperConfig) для любого HTMLElement на переопределить значение по умолчанию 'clippingParents', например, document. body:

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

Разметка

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

Создание всплывающих подсказок для пользователей клавиатуры и вспомогательных технологий

Вы должны добавлять всплывающие подсказки только к HTML-элементам, которые традиционно ориентированы на клавиатуру и являются интерактивными (например, ссылки или элементы управления формы). Хотя произвольные элементы HTML (такие как

<span>) можно сделать доступными для фокусировки, добавив атрибут tabindex="0", это добавит потенциально раздражающие и сбивающие с толку позиции табуляции на неинтерактивных элементах для пользователей клавиатуры, и большинство Вспомогательные технологии в настоящее время не объявляют всплывающую подсказку в этой ситуации.

Кроме того, не полагайтесь исключительно на hover в качестве триггера для Вашей всплывающей подсказки, так как это сделает невозможным запуск ваших всплывающих подсказок для пользователей клавиатуры.

<!-- HTML для записи -->
<a href="#" data-bs-toggle="tooltip" title="Текст всплывающей подсказки!">Наведите на меня</a>
<!-- Разметка, созданная плагином -->
<div role="tooltip">
  <div></div>
  <div>
    Текст всплывающей подсказки!
  </div>
</div>

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

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

<span tabindex="0" data-bs-toggle="tooltip" title="Отключенная подсказка">
  <button type="button" disabled>Отключенная кнопка</button>
</span>

Параметры

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

Обратите внимание, что по соображениям безопасности параметры sanitize, sanitizeFn и allowList не могут быть предоставлены с использованием атрибутов данных.

Наименование	Тип	По умолчанию	Описание
`animation`	boolean	`true`	Применить переход CSS fade к всплывающей подсказке
`container`	string \| element \| false	`false`	Добавляет всплывающую подсказку к определенному элементу. Пример: `container: 'body'`. Этот параметр особенно полезен тем, что позволяет Вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвратит отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.
`delay`	number \| object	`0`	Задержка показа и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера Если указан номер, задержка применяется как к скрытию, так и к отображению. Структура объекта: `delay: { "show": 500, "hide": 100 }`
`html`	boolean	`false`	Разрешить HTML во всплывающей подсказке. Если `true`, HTML-теги в `title` всплывающей подсказки будут отображаться во всплывающей подсказке. Если `false`, свойство `innerText` будет использоваться для вставки содержимого в DOM. Используйте текст, если Вас беспокоят XSS-атаки.
`placement`	string \| function	`'top'`	Как разместить всплывающую подсказку — auto \| top \| bottom \| left \| right. Если задано `auto` всплывающая подсказка будет динамически переориентирована. Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM триггерного элемента в качестве второго. Контекст `this` установлен на экземпляр всплывающей подсказки.
`selector`	string \| false	`false`	Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM (поддержка `jQuery. on`). Смотрите это и информативный пример.
`template`	string	`'<div role="tooltip"><div></div><div></div></div>'`	Базовый HTML для использования при создании всплывающей подсказки. `title` всплывающей подсказки будет вставлен в `.tooltip-inner`. `.tooltip-arrow` станет стрелкой всплывающей подсказки. Самый внешний элемент оболочки должен иметь класс `.tooltip` и `role="tooltip"`.
`title`	string \| element \| function	`''`	Значение заголовка по умолчанию, если атрибут `title` отсутствует. Если задана функция, она будет вызываться со ссылкой `this`, установленной на элемент, к которому прикреплена всплывающая подсказка.
`trigger`	string	`'hover focus'`	Как запускается всплывающая подсказка — click \| hover \| focus \| manual. Вы можете передать несколько триггеров; разделите их пробелом. `'manual'` указывает, что всплывающая подсказка будет запускаться программно через методы `.show()`, `.hide()` и `.toggle()`; это значение нельзя комбинировать с каким-либо другим триггером. Само по себе `'hover'` приведет к появлению всплывающих подсказок, которые нельзя вызвать с клавиатуры, и их следует использовать только при наличии альтернативных методов передачи той же информации для пользователей клавиатуры.
`fallbackPlacements`	array	`['top', 'right', 'bottom', 'left']`	Определите резервные места размещения, предоставив список мест размещения в массиве (в порядке предпочтения). Для получения дополнительной информации смотрите документацию о поведении Popper.
`boundary`	string \| element	`'clippingParents'`	Граница ограничения переполнения всплывающей подсказки (применяется только к модификатору Popper preventOverflow). По умолчанию это `'clippingParents'` и может принимать ссылку HTMLElement (только через JavaScript). Дополнительную информацию смотрите в detectOverflow в документации Popper.
`customClass`	string \| function	`''`	Добавляйте классы во всплывающую подсказку, когда она отображается. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: `'class-1 class-2'`. Вы также можете передать функцию, которая должна возвращать одну строку, содержащую дополнительные имена классов.
`sanitize`	boolean	`true`	Включите или отключите дезинфекцию. Если активированы параметры `'template'` и `'title'` , будут очищены. Смотрите раздел очистки в нашей документации по JavaScript.
`allowList`	object	Значение по умолчанию	Объект, содержащий разрешенные атрибуты и теги
`sanitizeFn`	null \| function	`null`	Здесь Вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если Вы предпочитаете использовать специальную библиотеку для выполнения очистки.
`offset`	array \| string \| function	`[0, 0]`	Смещение всплывающей подсказки относительно цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: `data-bs-offset="10,20"` Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение popper, ссылку и popper rects в качестве первого аргумента. Узел DOM запускающего элемента передается в качестве второго аргумента. Функция должна возвращать массив с двумя числами: `[skidding, distance]`. Дополнительную информацию смотрите в offset документации Popper.
`offset`	array \| string \| function	`[0, 0]`	Смещение всплывающей подсказки относительно цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: `data-bs-offset="10,20"` Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение popper, ссылку и popper rects в качестве первого аргумента. Узел DOM запускающего элемента передается в качестве второго аргумента. Функция должна возвращать массив с двумя числами: `[skidding, distance]`. Дополнительную информацию смотрите в offset документации Popper.
`popperConfig`	null \| object \| function	`null`	Чтобы изменить конфигурацию Popper по умолчанию для Bootstrap, смотрите конфигурацию Popper. Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Popper по умолчанию для Bootstrap. Это поможет вам использовать и объединить настройки по умолчанию с вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper.

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

popperConfig

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

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения. Кроме того, вызов метода переходного компонента будет проигнорирован.

Дополнительную информацию см. в нашей документации по JavaScript.

show

Показывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана (то есть до того, как произойдет событие shown.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.

tooltip.show()

hide

Скрывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта (т.е. до того, как произойдет событие hidden.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки.

tooltip.hide()

toggle

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (то есть до того, как произойдет событие shown. bs.tooltip или hidden.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки.

tooltip.toggle()

dispose

Скрывает и уничтожает всплывающую подсказку элемента (Удаляет сохраненные данные в элементе DOM). Всплывающие подсказки, использующие делегирование (которые создаются с использованием параметра selector), не могут быть уничтожены индивидуально для дочерних элементов триггера.

tooltip.dispose()

enable

Дает возможность отображения всплывающей подсказки элемента. Подсказки включены по умолчанию.

tooltip.enable()

disable

Убирает возможность отображения всплывающей подсказки элемента. Всплывающая подсказка будет отображаться, только если она будет повторно включена.

tooltip.disable()

toggleEnabled

Переключает возможность отображения или скрытия всплывающей подсказки элемента.

tooltip.toggleEnabled()

update

Обновляет положение всплывающей подсказки элемента.

tooltip.update()

getInstance

Статический метод, позволяющий получить экземпляр всплывающей подсказки, связанный с элементом DOM.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Статический метод, который позволяет вам получить экземпляр всплывающей подсказки, связанный с элементом DOM, или создать новый, если он не был инициализирован.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

События

Тип события	Описание
`show. bs.tooltip`	Это событие запускается немедленно при вызове метода экземпляра `show`.
`shown.bs.tooltip`	Это событие запускается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
`hide.bs.tooltip`	Это событие запускается сразу после вызова метода экземпляра `hide`.
`hidden.bs.tooltip`	Это событие запускается, когда всплывающая подсказка перестала быть скрытой от пользователя (будет ждать завершения переходов CSS).
`inserted.bs.tooltip`	Это событие запускается после события `show.bs.tooltip`, когда шаблон всплывающей подсказки был добавлен в DOM.

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl. addEventListener('hidden.bs.tooltip', function () {
  // делайте что-нибудь...
})
tooltip.hide()

Tooltip | Directives | BootstrapVue

Добавляйте настраиваемые всплывающие подсказки BootstrapVue к любому элементу. Всплывающие подсказки могут быть вызваны наведением курсора, фокусировкой или кликом по элементу.

Обзор

Используйте директиву v-b-tooltip для любого элемента или компонента, где вы хотите, чтобы всплывающая подсказка появлялась.

<div>
  <b-button v-b-tooltip.hover title="Содержание всплывающей подсказки">Наведите меня</b-button>
</div>
<!-- b-tooltip.vue -->

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

Всплывающие подсказки полагаются на стороннюю библиотеку Popper.js для позиционирования.
Всплывающие подсказки требуют настраиваемого SCSS/CSS BootstrapVue для правильной работы и для вариантов.
Если заголовок не указан (или это пустая строка), всплывающая подсказка не будет отображаться.
Укажите контейнер: ‘body’ (по умолчанию), чтобы избежать проблем с рендерингом в более сложных компонентах (таких как группы ввода, группы кнопок и т. д.).
Не будут работать всплывающие подсказки для скрытых элементов.
Всплывающие подсказки для disabled элементов должны запускаться для элемента-оболочки.
При запуске из гиперссылок, которые охватывают несколько строк, всплывающие подсказки будут центрированы. Используйте white-space: nowrap; на ваших <a>, <b-link> и <router-link>, чтобы избежать такого поведения.
Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.

Позиционирование

Для позиционирования доступны двенадцать вариантов выравнивания: top, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop и leftbottom. Положение по умолчанию — top. Позиционирование относительно триггерного элемента.

Live example

<div>
  <b-container fluid>
    <b-row>
      <b-col md="3">
        <b-button v-b-tooltip.hover.top="'Подсказка!'" variant="primary">Вверху</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.right="'Подсказка!'" variant="primary">Справа</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.left="'Подсказка!'" variant="primary">Слева</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.bottom="'Подсказка!'" variant="primary">Внизу</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.topright="'Подсказка!'" variant="primary">Вверху справа</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip. hover.topleft="'Подсказка!'" variant="primary">Вверху слева</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.bottomright="'Подсказка!'" variant="primary">Внизу справа</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.bottomleft="'Подсказка!'" variant="primary">Внизу слева</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.lefttop="'Подсказка!'" variant="primary">Слева вверху</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.leftbottom="'Подсказка!'" variant="primary">Слева внизу</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.righttop="'Подсказка!'" variant="primary">Справа вверху</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.rightbottom="'Подсказка!'" variant="primary">Справа внизу</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>
<!-- b-tooltip-positioning. vue -->

Триггеры

Всплывающие подсказки могут запускаться (открываться/закрываться) с помощью любой комбинации click, hover и focus. Триггер по умолчанию — hover focus. Или можно указать триггер ручного управления, где всплывающее окно может быть открыто или закрыто только программно.

Если всплывающая подсказка имеет более одного триггера, все триггеры должны быть очищены, прежде чем всплывающая подсказка закроется. т.е. если всплывающая подсказка имеет триггер focus click, и она была открыта focus, а затем пользователь щелкает элемент триггера, он должен кликнуть его еще раз и переместить фокус, чтобы закрыть всплывающую подсказку.

<div>
  <b-container>
    <b-row>
      <b-col md="3">
        <b-button v-b-tooltip="'Подсказка!'" variant="outline-success">Наведение + Фокус</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip. hover="'Подсказка!'" variant="outline-success">Наведение</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.click="'Подсказка!'" variant="outline-success">Клик</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.focus="'Подсказка!'" variant="outline-success">Фокус</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>
<!-- b-tooltip-triggers.vue -->

Заставить всплывающие подсказки работать с клавиатурой и пользователями вспомогательных технологий

Вы должны добавлять всплывающие подсказки только к элементам HTML, которые традиционно являются интерактивными и ориентированными на клавиатуру (такими как ссылки, кнопки или элементы управления формы). Хотя произвольные элементы HTML (такие как <span>) можно сделать фокусируемыми, добавив атрибут tabindex="0", это добавит потенциально раздражающие и запутанные позиции табуляции на неинтерактивных элементах для пользователей клавиатуры. Кроме того, большинство вспомогательных технологий в настоящее время не объявляют всплывающую подсказку в этой ситуации.

Кроме того, не полагайтесь исключительно на hover в качестве триггера для всплывающей подсказки, так как это сделает ваши всплывающие подсказки невозможными для срабатывания для пользователей, использующих только клавиатуру.

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

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

<div>
  <span tabindex="0" v-b-tooltip. top title="Отключенная подсказка">
    <b-button variant="primary" disabled>Кнопка отключена</b-button>
  </span>
</div>
<!-- disabled-trigger-element.vue -->

Предостережения со срабатыванием

focus на элементах <button>

Для правильного кросс-браузерного и кросс-платформенного поведения при использовании только триггера focus вы должны использовать элемент, который отображает тег <a>, а не тег <button>, и вы также должны включить атрибут tabindex="0".

Следующее сгенерирует <a>, который выглядит как кнопка:

<b-button
  href="#"
  tabindex="0"
  v-b-tooltip.focus
  title="Tooltip title"
>
  Кнопка ссылки с директивой всплывающей подсказки
</b-button>

Закрыть при следующем нажатии

Используйте как click, так и blur, если вы хотите, чтобы всплывающая подсказка открывалась только при клике элемента, но закрывалась, когда кликали что-либо еще в документе или получали фокус.

Обратите внимание, что ваш элемент должен находиться в последовательности вкладок документа, чтобы это работало. Если ваш элемент не является вкладкой, добавьте атрибут tabindex="0" к элементу.

Содержание заголовка

Существует несколько вариантов указания заголовка всплывающей подсказки.

По умолчанию всплывающая подсказка будет использовать атрибут title элемента в качестве содержимого всплывающей подсказки. Заголовок также можно передать как объект v-b-tooltip в виде

const options = {
  title: 'This is the title'
}

Если содержимое заголовка имеет базовую HTML-разметку, вам также потребуется установить для свойства html значение true или использовать модификатор директивы html

// Object format with HTML
const options = {
  title: 'This is the <strong>title</strong>',
  html: true
}

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

<template>
  <b-container>
    <b-row>
      <b-col md="3">
        <b-button v-b-tooltip.hover :title="'Tip from title attribute ' + date" variant="success">Title</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover="'String Tip'" variant="success">String</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.html="tipData" variant="success">Data</b-button>
      </b-col>
      <b-col md="3">
        <b-button v-b-tooltip.hover.html="tipMethod" variant="success">Method</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
  export default {
    data() {
      return {
        tipData: { title: 'Tooltip <em>Message</em>' },
        date: new Date(),
        timer: null
      }
    },
    mounted() {
      this. timer = setInterval(() => {
        this.date = new Date()
      }, 1000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      tipMethod() {
        // Note this is called each time the tooltip is first opened.
        return '<strong>' + new Date() + '</strong>'
      }
    }
  }
</script>
<!-- b-tooltip-content.vue -->

Варианты и пользовательский класс

Всплывающие подсказки BootstrapVue поддерживают контекстные цветовые варианты с помощью нашего пользовательского CSS либо с помощью модификаторов директив, либо параметров конфигурации:

<template>
  <b-container fluid>
    <b-row>
      <b-col>
        <b-button v-b-tooltip.hover.v-danger title="Danger variant">Danger Modifier</b-button>
      </b-col>
      <b-col>
        <b-button v-b-tooltip.hover="{ variant: 'info' }" title="Info variant">Info Config</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>
<!-- b-tooltip-variants. vue -->

Варианты темы Bootstrap по умолчанию: danger, warning, success, primary, secondary, info, light и dark. Вы можете изменить или добавить дополнительные варианты через Bootstrap переменные SCSS

Пользовательский класс можно применить к внешней оболочке всплывающей подсказки <div> с помощью свойства опции customClass:

<b-button v-b-tooltip.hover="{ customClass: 'my-tooltip-class' }" title="Tooltip">Кнопка</b-button>

Синтаксис и использование директив

<b-button v-b-tooltip:[container].[mod1].[mod2].[...].[modN]="<value>">Кнопка</b-button>

Где [container] может быть (необязательно):

Идентификатор элемента (минус #) для размещения разметки всплывающей подсказки
Если не предусмотрено, всплывающие подсказки добавляются к body. Если элемент триггера находится внутри модального окна, всплывающая подсказка будет добавлена к контейнеру модального окна

Где [modX] может быть (все необязательно):

Позиционирование: top, bottom, left, right, auto, topleft, topright, bottomleft, bottomright, lefttop, leftbottom, righttop или rightbottom (выигрывает последний найденный, по умолчанию top).
Триггер события: click, hover, focus, blur (если ничего не указано, по умолчанию используются focus и hover. blur является обработчиком только закрытия, и если он указан сам по себе, то будет преобразован в focus). Используйте manual, если вы хотите управлять видимостью только вручную.
nofade для отключения анимации.
html, чтобы включить рендеринг необработанного HTML. По умолчанию HTML экранируется и преобразуется в текст.
Значение задержки в формате d### (где ### в мс, по умолчанию 50), применяется как к hide, так и к show.
Значение задержки показа в формате ds### (где ### в мс, по умолчанию 50), применяется только к триггеру show.
Значение задержки скрытия в формате dh### (где ### в мс, по умолчанию 50), применяется только к триггеру hide.
Значение смещения в пикселях в формате o### (где ### это количество пикселей, по умолчанию 0. Допускаются отрицательные значения).
Настройка границы window или viewport. Элемент для ограничения визуального размещения всплывающей подсказки. Если не указано, граница по умолчанию соответствует родительскому элементу прокрутки триггерного элемента (в большинстве случаев этого будет достаточно).
Контекстный вариант в форме v-XXX (где XXX название цветового варианта).
noninteractive, чтобы сделать всплывающую подсказку не интерактивной для пользователя.

Где <value> может быть (необязательно):

Строка, содержащая заголовок всплывающей подсказки
Ссылка на функцию для создания заголовка всплывающей подсказки (получает один аргумент, который является ссылкой на элемент DOM, вызывающий всплывающую подсказку)
Объект, содержащий более сложную конфигурацию всплывающей подсказки. Смотрите ниже допустимые свойства объекта:

Свойства объекта конфигурации параметров:

Свойство	Тип	По умолчанию	Описание
`animation`	Boolean	`true`	Применить CSS-переход затухания к всплывающей подсказке
`container`	String ID или HTMLElement или `false`	`false`	Добавляет всплывающую подсказку к определенному элементу. Пример: `container: '#body'`. Этот параметр особенно полезен тем, что позволяет расположить всплывающую подсказку в потоке документа рядом с инициирующим элементом, что предотвратит всплывающую подсказку от инициирующего элемента во время изменения размера окна. Если установлено значение `false`, всплывающая подсказка будет добавлена к `body`, или, если элемент триггера находится внутри модального окна, он будет добавлен к контейнеру модального окна
`delay`	Number или Object	`50`	Задержка показа и скрытия всплывающей подсказки (мс). Если указано число, задержка применяется как для скрытия, так и для показа. Структура объекта: `delay: { "show": 500, "hide": 100 }`
`html`	Boolean	`false`	Разрешить HTML в подсказке. Если задано значение true, теги HTML в заголовке всплывающей подсказки будут отображаться во всплывающей подсказке. Если false, заголовок будет вставлен как обычный текст. Используйте текст, если вы беспокоитесь о XSS-атаках
`placement`	String или Function	`'top'`	Как расположить всплывающую подсказку — `auto`, `top`, `bottom`, `left`, `right`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop` или `rightbottom`. Когда указано `auto`, он будет динамически переориентировать всплывающую подсказку
`title`	String или Element или Function	`''`	Значение заголовка по умолчанию, если атрибут заголовка отсутствует. Если задана функция, она должна возвращать строку
`trigger`	String	`'hover focus'`	Как срабатывает всплывающая подсказка: `click`, `hover`, `focus`. Вы можете передать несколько триггеров; разделите их пробелом
`offset`	Number или String	`0`	Смещение всплывающей подсказки относительно ее цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js
`fallbackPlacement`	String или Array	`'flip'`	Позволяет указать, какую позицию Поппер будет использовать при откате. Может быть `flip`, `clockwise`, `counterclockwise` или массивом мест размещения. Для получения дополнительной информации обратитесь к документации по поведению Popper.js
`boundary`	String ID или HTMLElement	`'scrollParent'`	Контейнер, в котором всплывающая подсказка будет визуально ограничена. В большинстве случаев должно быть достаточно значения по умолчанию, но вам может потребоваться изменить его, если ваш целевой элемент находится в небольшом контейнере с прокруткой переполнения. Поддерживаемые значения: `'scrollParent'` (по умолчанию), `'viewport'`, `'window'`, или ссылка на элемент HTML
`boundaryPadding`	Number	`5`	Количество пикселей, используемое для определения минимального расстояния между границами и всплывающей подсказкой. Это гарантирует, что всплывающая подсказка всегда имеет небольшой отступ между краями своего контейнера
`interactive`	Boolean	`true`	Должна ли всплывающая подсказка быть интерактивной с пользователем
`variant`	String	`null`	Контекстный вариант цвета всплывающей подсказки
`customClass`	String	`null`	Пользовательское имя класса для применения к элементу внешней оболочки всплывающей подсказки
`id`	String	`null`	Идентификатор для использования в корневом элементе всплывающей подсказки. Если ничего не указано, оно будет сгенерировано автоматически. Если вы предоставляете идентификатор, он должен быть уникальным на отображаемой странице
`disabled`	Boolean	`false`	Установите значение `true`, чтобы отключить всплывающую подсказку

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

Самое простое использование:

v-b-tooltip="'Это Подсказка!'"

или используйте атрибут title элемента для содержимого всплывающей подсказки:

v-b-tooltip title="Это заголовок Подсказки"

Примеры размещения:

v-b-tooltip. bottom
v-b-tooltip.right

Примеры вариантов:

v-b-tooltip.v-primary => `primary` variant
v-b-tooltip.v-danger => `danger` variant

Примеры триггеров:

v-b-tooltip.hover => Hover only
v-b-tooltip.click => Click only
v-b-tooltip.hover.focus => Both hover and focus

Комбо:

v-b-tooltip.hover.bottom => Show on hover and place at bottom
v-b-tooltip.bottom.hover => Same as above
v-b-tooltip.bottom.hover.v-danger => Same as above, but with variant

Объект:

v-b-tooltip="{ title: 'Title', placement: 'bottom', variant: 'danger' }"

Скрытие и отображение всплывающих подсказок с помощью событий $root

Вы можете закрыть (скрыть) все открытые всплывающие подсказки, создав событие bv::hide::tooltip на $root:

this. $root.$emit('bv::hide::tooltip')

Чтобы закрыть конкретную всплывающую подсказку, передайте id элемента триггера или id всплывающей подсказки (если он был указан в объекте конфигурации) в качестве первого аргумента:

this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id')

Чтобы открыть конкретную всплывающую подсказку, передайте id элемента триггера или id всплывающей подсказки (если он был указан в объекте конфигурации) в качестве первого аргумента при генерировании bv::show::tooltip события $root:

this.$root.$emit('bv::show::tooltip', 'my-trigger-button-id')

Чтобы открыть все всплывающие окна одновременно, опустите аргумент id при генерации события bv::show::tooltip.

Эти события работают как для версии компонента , так и для директивы всплывающей подсказки.

Обратите внимание, что элемент триггера должен существовать в DOM и быть в видимом состоянии, чтобы отображалась всплывающая подсказка.

Отключение и включение всплывающих подсказок с помощью событий $root

Вы можете отключить все открытые всплывающие подсказки, создав событие bv::disable::tooltip на $root:

this.$root.$emit('bv::disable::tooltip')

Чтобы отключить конкретную всплывающую подсказку, передайте id элемента триггера или id всплывающей подсказки (если он был указан в объекте конфигурации) в качестве первого аргумента:

this.$root.$emit('bv::disable::tooltip', 'my-trigger-button-id')

Чтобы включить конкретную всплывающую подсказку, передайте id элемента триггера или id всплывающей подсказки (если он был предоставлен в объекте конфигурации) в качестве первого аргумента при генерировании bv::enable::tooltip события $root:

this. $root.$emit('bv::enable::tooltip', 'my-trigger-button-id')

Чтобы включить все всплывающие окна одновременно, опустите аргумент id при генерации события bv::enable::tooltip.

Эти события работают как для версии компонента , так и для директивы всплывающей подсказки.

Обратите внимание, что элемент триггера должен существовать в DOM, чтобы всплывающая подсказка была включена или отключена.

Смотрите также

директива v-b-popover
компонент <b-tooltip>
компонент <b-popover>

Directive reference

Импорт отдельных директив

Вы можете импортировать отдельные директивы в свой проект с помощью следующих именованных экспортов:

Директива	Именованный экспорт	Путь импорта
`v-b-tooltip`	`VBTooltip`	`bootstrap-vue`

Пример:

import { VBTooltip } from 'bootstrap-vue'
// Note: Vue automatically prefixes the directive name with 'v-'
Vue. directive('b-tooltip', VBTooltip)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные директивы.

Именованный экспорт	Путь импорта
`VBTooltipPlugin`	`bootstrap-vue`

Пример:

import { VBTooltipPlugin } from 'bootstrap-vue'
Vue.use(VBTooltipPlugin)

Всплывающее окно CSS с плавным появлением и исчезновением

Задать вопрос

спросил 6 лет, 8 месяцев назад

Изменено 6 лет, 8 месяцев назад

Просмотрено 10 тысяч раз

Я хочу реализовать всплывающее окно только с CSS для изображения, которое должно отображаться, когда пользователь наводит указатель мыши на это изображение. Почитав здесь, например в этой теме, я пришел к такому решению:

 a.tooltip span {
    ширина: 250 пикселей;
    граница: #000 1px сплошная;
    фон: #F8F8F8;
    дисплей: нет;
    отступ: 10 пикселей;
    z-индекс: 1000000;
    непрозрачность: 0;
    переход: 750 мс все;
}
a.tooltip: наведение диапазона {
    дисплей: встроенный;
    положение: абсолютное;
    верх: 10 пикселей;
    слева: 25 пикселей;
    контур: нет;
    текстовое оформление: нет;
    размер шрифта: 70%;
    цвет: #000;
    непрозрачность: 1;
}

Однако это решение не делает всплывающее окно плавным, оно просто всплывает без задержки. Кроме того, я хочу, чтобы всплывающее окно исчезало, когда пользователь снова перемещал курсор мыши.

Есть идеи, что я делаю неправильно или что мне лучше попробовать?

PS: Вот как я называю код:

 
  
  Текст всплывающей подсказки.

Вы не можете добавить переход к элементу с display:none; вы должны сделать это следующим образом:

 a. tooltip span {
    положение: абсолютное;
    верх: 10 пикселей;
    слева: 25 пикселей;
    ширина: 250 пикселей;
    граница: #000 1px сплошная;
    фон: #F8F8F8;
    отступ: 10 пикселей;
    z-индекс: 1000000;
    дисплей: встроенный;
    непрозрачность: 0;
    переход: 750 мс все;
}
a.tooltip: наведение диапазона {
    контур: нет;
    текстовое оформление: нет;
    размер шрифта: 70%;
    цвет: #000;
    непрозрачность: 1;
}

Просто используйте непрозрачность, это позволяет переходить. Живой пример: https://jsfiddle.net/wbpbcyfz/1/

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

Краткий обзор

Полезным подспорьем для приложения является всплывающее объяснение при наведении курсора мыши элемент, например элемент меню или URL-ссылка. Такое всплывающее окно при наведении называется всплывающей подсказкой. Это часто делается с помощью JavaScript, однако предпочтительнее делать это с помощью CSS поскольку это может быть быстрее, и поскольку JavaScript иногда (выборочно) отключается теми, кто осторожны (или некоторые сказали бы: параноики) при серфинге в Интернете.

Использование CSS для создания всплывающих подсказок

Основа идеи изменить CSS видимость с скрытый на видимый при наведении мыши на элемент.

На практике нужно немного больше:

установите цвет фона и границы так, чтобы он выделялся на фоне того, что находится за ним
также должен быть установлен z-index , чтобы отображался поверх (т.е. скрывался) любой текст, который появляется поверх
Когда он невидим, он все равно будет занимать место на веб-странице, это оставит пустое место. Установка position:absolute исправит это.

Простая реализация всплывающей подсказки. Мы определяем класс tooltip_demo , который будет использоваться при наведении курсора на ссылку:

/* Наведите курсор на всплывающую подсказку */
.tooltip_demo {
  положение: абсолютное; /* Убедитесь, что он не занимает места на веб-странице */
  видимость: скрытая; /* Обычно он невидим */
  цвет фона: желтый; /* Что-то, что контрастирует с остальной частью веб-страницы */
  цвет границы:#000; /* Черная рамка шириной 1 пиксель */
  ширина границы: 1px;
  стиль границы: сплошной;
  z-индекс: 12; /* Убедитесь, что он скрывает все, что появляется там, где он появляется */
}
a:hover + .tooltip_demo { /* Выберите элемент (промежуток), который следует по ссылке () */
                            /* над которым находится указатель мыши */
  видимость: видимая; /* Сделать видимым текст в классе tooltip_demo */
}

и используйте его, чтобы расширить значение Home , обратите внимание, как по ссылке ( ) есть class tooltip_demo :

ГлавнаяПерейти на главную страницу

Попробуйте, наведите указатель мыши на следующее слово: ГлавнаяПерейти на главную страницу

Позиционирование всплывающей подсказки

Вы заметили, что всплывающая подсказка появилась справа от слова 9. 0096 Дом , вы можете не хотеть этого там. Вы можете расположить всплывающие подсказки относительно содержащего блока.

Например, у вас есть галерея изображений и вам нужны всплывающие подсказки над стрелками влево/вправо, которые перенесет зрителей к предыдущему/следующему изображению. (Обратите внимание, что предыдущие/следующие ссылки ниже приведены для иллюстрации и не работают.

CSS:

/* Позиционированные всплывающие подсказки */
.tooltipContainer {
 должность: родственница; /* Подсказки со стрелками относительно этого */
 максимальная ширина: 500 пикселей;
 поле: 0 авто 0 авто;
 выравнивание текста: по центру;
}
.tooltipContainer img {
 дисплей:блок; /* Чтобы всплывающая подсказка изображения была относительной */
 поле: 0 авто 0 авто;
}
.tooltipImageArrow { /* Для стрелок */
 размер шрифта: 200%; /* Достаточно большой, чтобы видеть */
 маржа: 0;
 поплавок: справа; /* Переместиться вправо от содержащего tooltipContainer */
}
.tooltipImageArrowLeft {
 плыть налево; /* Перемещение влево от содержащего tooltipContainer */
}
. tooltipImageArrow > {
 текстовое оформление: нет; /* Остановить подчеркивание стрелки */
}
.tooltipImageCaption {
 размер шрифта: 200%;
}
.tooltip_demo_p { /* Позиционированная всплывающая подсказка */
 положение: абсолютное; /* Убедитесь, что он не занимает места на веб-странице */
 видимость: скрытая; /* Обычно он невидим */
 цвет фона: желтый; /* Что-то, что контрастирует с остальной частью веб-страницы */
 цвет границы:#000; /* Черная рамка шириной 1 пиксель */
 ширина границы: 1px;
 стиль границы: сплошной;
 z-индекс: 12; /* Убедитесь, что он скрывает все, что появляется там, где он появляется */
 верх:+3em;
}
/* Выберите элемент (промежуток), который следует за ссылкой (), над которой находится указатель мыши */
a: hover + .tooltip_demo_p, img: hover + .tooltip_demo_p {
 видимость: видимая; /* Сделать видимым текст в классах tooltip_demo и tooltip_demo_p */
}
.tooltipr { /* Для стрелки на размере RH расположите иначе*/
 слева:авто;
 справа: 2эм;
}

HTML-код для этого:

<дел>
    php?n=0">⇐
     Просмотреть предыдущее изображение
   Орган Мортимера
    ⇒
     Просмотреть следующее изображение
  

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

Вот как это выглядит:

⇐ Посмотреть предыдущее изображение Орган Мортимера ⇒ Посмотреть следующее изображение
Щелкните изображение, чтобы узнать больше о Mortimer, откроется еще одна вкладка

Предостережения

Это работает с устройствами, которые имеют указатель (мышь). Некоторые нет, например, мобильные телефоны, хотя всплывающие окна иногда появляются.
Opera 12 имеет проблемы с форматированием в HTML 4 DOCTYPE, но работает с HTML 5, поэтому используйте

Задержки перехода

В некоторых ситуациях появление и немедленное исчезновение всплывающих окон вызывает много миганий при перемещении мыши; это может быть нежелательно, например, пользователь двигает мышь на большое расстояние и проходит над всплывающим окном, но не интересуется им. Например, быстро наведите указатель мыши на 3 элемента ниже:

ГлавнаяПерейти на главную страницу

Swiss FishЦены на рыбу в Швейцарии

Bag PipesКак играть на мешке

Вы можете установить задержку появления всплывающего окна и его исчезновения. Вы делаете это, добавляя свойство перехода и transition-delay в класс tooltip_demo а также там, где он выбран наведением

  .tooltip_demo {
   ... все предыдущие свойства
   свойство перехода: видимость;
   задержка перехода: 0,2 с;
  }
  а: наведение + . tooltip_demo {
   видимость: видимая;
   свойство перехода: видимость;
   задержка перехода: 0,2 с;
  }

transition-property имя свойства, в котором переход будет задержан, вот оно: visibility
transition-delay говорит, сколько времени до изменения свойства, здесь это 0,2 секунды.

Второе определение выше ( a:hover …) определяет задержку перед появлением всплывающего окна при перемещении мыши, первый задерживает его исчезновение, когда мышь отошла. Это могут быть разные времена, но это не выглядит хорошо.

Попробуйте быстро навести указатель мыши на список ниже (вы не должны видеть никаких всплывающих окон) и медленно, чтобы увидеть их.

ГлавнаяПерейти на главную страницу

Швейцарская рыбаЦены на рыбу в Швейцарии

Волынки в мешкахКак играть волынкой

Это простое использование переходов, для получения дополнительной информации см. Рабочий проект W3C от 12 февраля 2013 г.

Всплывающее окно при наведении css: Всплывающая подсказка на CSS | htmlbook.ru

Всплывающие подсказки · Bootstrap v5.0

Обзор

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

Примеры

Sass

Переменные

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

Переполнение

Разметка

Создание всплывающих подсказок для пользователей клавиатуры и вспомогательных технологий

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

Параметры

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

Методы

Асинхронные методы и переходы

show

hide

toggle

dispose

enable

disable

toggleEnabled

update

getInstance

getOrCreateInstance

События

Tooltip | Directives | BootstrapVue

Обзор

Позиционирование

Триггеры

Заставить всплывающие подсказки работать с клавиатурой и пользователями вспомогательных технологий

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

Предостережения со срабатыванием

Закрыть при следующем нажатии

Содержание заголовка

Варианты и пользовательский класс

Синтаксис и использование директив

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

Скрытие и отображение всплывающих подсказок с помощью событий $root

Отключение и включение всплывающих подсказок с помощью событий $root

Смотрите также

Directive reference

Импорт отдельных директив

Импортировать как плагин Vue.js

Всплывающее окно CSS с плавным появлением и исчезновением

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

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

Краткий обзор

Использование CSS для создания всплывающих подсказок

Позиционирование всплывающей подсказки

Предостережения

Задержки перехода

Добавить комментарий Отменить ответ

Рубрики