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

Tooltip CSS уроки для начинающих академия

❮ Назад Дальше ❯

---

Создание всплывающих подсказок с помощью CSS.

---

Демонстрация: примеры подсказок

Всплывающая подсказка часто используется для указания дополнительной информации о чем-то, когда пользователь перемещает указатель мыши на элемент:

Top Tooltip text

Right Tooltip text

Bottom Tooltip text

Left Tooltip text

---

Базовая подсказка

Создайте подсказку, которая появляется, когда пользователь перемещает указатель мыши на элемент:

Пример

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text — see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */

. tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<div>Hover over me
  <span>Tooltip text</span>
</div>

Пример объяснено

HTML: Используйте элемент контейнера (например, <div>) и добавьте к нему класс "tooltip" . Когда пользователь наводит курсор на этот <div>, он покажет текст подсказки.

Текст подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext" .

CSS: Класс tooltip использует position:relative , который необходим для размещения текста подсказки (

position:absolute ). Примечание: Ниже приведены примеры размещения всплывающей подсказки.

Класс tooltiptext содержит фактический текст подсказки. Он скрыт по умолчанию и будет виден при наведении курсора (см. ниже). Мы также добавили некоторые основные стили к нему: 120пкс ширина, черный цвет фона, белый цвет текста, центрированный текст, и 5px верхней и нижней обивка.

Свойство CSS border-radius используется для добавления скругленных углов в текст подсказки.

Селектор :hover используется для отображения текста подсказки, когда пользователь перемещает указатель мыши на <div> с

class="tooltip" .

---

---

Размещение всплывающих подсказок

В этом примере подсказка помещается справа ( left:105% ) «парящего» текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине его элемента контейнера. Мы используем число 5 , поскольку текст подсказки имеет верхний и нижний отступы 5px. Если увеличить его заполнение, также увеличьте значение свойства top, чтобы убедиться, что он остается в середине (если это то, что вы хотите). То же самое относится, если вы хотите, чтобы подсказка помещается влево.

Подсказка справа

.tooltip .tooltiptext {
    top: -5px;
    left: 105%;
}

Result:

Hover over me Tooltip text

Левая подсказка

. tooltip .tooltiptext {
    top: -5px;
    right: 105%;
}

Result:

Hover over me Tooltip text

Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, смотрите примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это необходимо для центрирования всплывающей подсказки над/под текстом, наводимым курсором. Он равен половине ширины подсказки (120/2 = 60).

Верхняя подсказка

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

Result:

Hover over me Tooltip text

Нижняя подсказка

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

Result:

Hover over me Tooltip text

---

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

Чтобы создать стрелку, которая должна появиться с определенной стороны подсказки, добавьте «пустое» содержимое после подсказки, с классом псевдо-элемента ::after вместе со свойством content . Сама стрелка создается с использованием границ. Это сделает всплывающую подсказку похожим на пузырь речи.

В этом примере показано, как добавить стрелку в нижнюю часть подсказки:

Нижняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;

    border-style: solid;
    border-color: black transparent transparent transparent;
}

Result:

Hover over me Tooltip text

Пример объяснено

Поместите стрелку в подсказку: top: 100% будет размещать стрелку в нижней части всплывающей подсказки. left: 50% будет центрировать стрелку.

Примечание: Свойство border-width определяет размер стрелки. При изменении этого параметра также измените значение margin-left. Это будет держать стрелку в центре.

border-color используется для преобразования содержимого в стрелку.

Мы установили верхнюю границу черным, а остальные-прозрачными. Если бы все стороны были черные, вы бы в конечном итоге с черной квадратной коробке.

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

Верхняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

Result:

Hover over me Tooltip text

В этом примере показано, как добавить стрелку слева от подсказки:

Стрелка влево

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

Result:

Hover over me Tooltip text

В этом примере показано, как добавить стрелку справа от подсказки:

Стрелка вправо

. tooltip .tooltiptext::after {
    content: » «;
    position: absolute;

    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

Result:

Hover over me Tooltip text

---

Исчезать в подсказках (анимация)

Если вы хотите, чтобы исчезать в тексте подсказки, когда он должен быть видимым, вы можете использовать CSS transition свойство вместе с opacity свойство, и перейти от полностью невидимым до 100% видимых, в число указанных секунд (1 секунды в нашем примере) :

Пример

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}

❮ Назад Дальше ❯

Подсказки. Компоненты · Bootstrap. Версия v4.1.3

Документация и примеры добавления настраиваемых всплывающих подсказок Bootstrap с CSS и JavaScript, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.

Обзор

Вот что надо знать перед началом работы с плагином подсказок:

• Подсказки зависят от 3-й части бибилотеки Popper.js в части позиционирования. Вы должны подключать popper.min.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js, содержащие Popper.js – это нужно для работы подсказок!
• Если вы подключаете файлы JavaScript с жесткого диска, вам нужна requires util.js.
• Подсказки не инициализируются и не используются по умолчанию по причинам производительности, так что вам надо сделать это самому.
• Подсказки с названием нулевой длины никогда не отображаются.
• Задайте container: 'body' чтобы избежать проблем с отрисовкой более сложных компонентов (таких как группы ввода, кнопок и т.д.).
• Нельзя запускать подсказки из скрытых элементов.
• Подсказки для элементов класса . disabled или с атрибутом disabled должны запускаться из элемента-«обертки».
• Когда подсказка запускается из многострочных ссылок, подсказки будут центрированы. Используйте
  white-space: nowrap; в ваших <a>, чтобы избежать этого.
• Подсказки должны быть спрятаны до того, как связанные с ними элементы удалены из DOM.

Вы всё поняли? Отлично, посмотрим, как это работает на конкретных примерах.

Пример: задействуйте подсказки везде

Один из способов инициализировать все подсказки на странице – обратиться к ним по абтрибуту data-toggle:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Примеры

Наведите курсор на ссылки – увидите подсказку:

Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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

<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

И с добавлением обычного HTML:

<button type="button" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

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

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

Запустите подсказку через JavaScript:

$('#example').tooltip(options)

Разметка

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

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

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

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

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div role="tooltip">
  <div></div>
  <div>
    Some tooltip text!
  </div>
</div>

Дезактивированные элементы

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

<span tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button type="button" disabled>Кнопка отключения</button>
</span>

Параметры

Параметры можно передавать через атрибуты или JavaScript. С атрибутами: добавьте название атрибута к data-, как в data-animation="".

Название	Тип	Умолчание	Описание
animation	boolean	true	Применяет CSS-переход к подсказке
container	string | element | false	false	Добавляет подсказку к выбранному элементу. Пример: container: 'body'. Эта опция полезна в том, что в «потоке» документа позволяет позиционировать подсказку рядом с ее триггером — что предотвратит подсказку от «сползания» при изменении размера окна.
delay	number | object	0	Откладывает показ и скрытие подсказки (мс) – не применяется к ручному типу триггера Если цифра поддерживается, задержка применяется к обоим hide/show Структура объекта: delay: { "show": 500, "hide": 100 }
html	boolean	false	Позволяет вставлять HTML в подсказку. Если true, тэги HTML в title подсказки будут отрисованы в подсказке. Если false – метод jQuery text будет использован для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
placement	string | function	‘top’	Как позиционируется всплывающая подсказка – авто – верх – низ – лево – право. Когда задано auto, это автоматически переориентирует подсказку. Когда функция используется для определения расположения, она вызывается с узлом всплывающей подсказки DOM как его первый аргумент и триггер-элемент узла DOM – как второй. Контекст this задается для экземпляра всплывающей подсказки.
selector	string | false	false	Если селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще.
template	string	'<div role="tooltip"><div></div><div></div></div>'	Обычный HTML для использования при создании всплывающих подсказок. title всплывающей подсказки будет введен в элемент класса .tooltip-inner Элемент класса .arrow станет стрелочкой всплывающей подсказки. Самый внешний оборачивающий элемент должен иметь класс .tooltip и role="tooltip".
title	string | element | function	»	Название по умолчанию, если атрибут title не задан. Если функция задана, она будет вызываться с ее набором this, к которому прикреплена всплывающая подсказка.
trigger	string	‘hover focus’	Задает, как вызывается подсказка — click | hover | focus | manual. Вы можете назначить много триггеров, разделите их пробелом. 'manual' означает, что подсказка будет запрограммированно запущена методами . tooltip('show'), .tooltip('hide') and .tooltip('toggle'), это значение нельзя сочетать с любым другим триггером. 'hover' сам по себе приведет к созданию подсказок, которые нельзя запустить с клавиатуры, и должны будут использоваться лишь, если другие методы для выдачи информации из подсказки для юзеров клавиатуры невозможны.
offset	number | string	0	Отступ подсказки относительно ее «цели». Для большей информации иди в документацию отступов Popper.js.
fallbackPlacement	string | array	‘flip’	Позволяет задать, какую позицию Popper.js будет использовать при «откате». Для информации — сюда.
boundary	string | element	‘scrollParent’	Граница ограничения overflow подсказки. Принимает значения 'viewport', 'window', 'scrollParent' или отсылку к элементу HTML (только в JavaScript). Для информации – документация по preventOverflow docs.

Методы

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

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

Смотрите документацию.

$().tooltip(options)

Прикрепляет обработчик подсказки к коллекции элементов.

.tooltip('show')

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

$('#element').tooltip('show')

.tooltip('hide')

Скрывает подсказку элемента. Возвращается к функции-вызову до того, как модальный элемент скрыт (т.е. до того, как произойдет событие hidden.bs.tooltip). Это расценивается «мануальным» запуском подсказки.

$('#element').tooltip('hide')

.tooltip('toggle')

Изменяет состояние подсказки элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт (т.е. до того, как события shown.bs.tooltip or hidden.bs.tooltip наступят). Расценивается как «мануальный» запуск подсказки.

$('#element').tooltip('toggle')

.tooltip('dispose')

Прячет и уничтожает подсказку элемента. Подсказки, которые используют «делегирование» (которые созданы использованием параметра «селектор»), нельзя уничтожить по отдельности на «подчиненных» элементах-триггерах.

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

Лишает подсказку элемента возможности быть показанной. Подсказка будет доступна к показу только если она будет ре-активирована.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

События

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

$('#myTooltip'). on('hidden.bs.tooltip', function () {
  // do something…
})

Tooltip | Components | BootstrapVue

Легко добавляйте всплывающие подсказки к элементам или компонентам с помощью компонента <b-tooltip> или директивы v-b-tooltip (предпочтительный метод).

<div>
  <b-button v-b-tooltip.hover title="Tooltip directive content">
    Наведите на меня
  </b-button>
  <b-button>
    Наведите на меня
  </b-button>
  <b-tooltip target="tooltip-target-1" triggers="hover">
    Я <b>компонентный</b> тултип контент!
  </b-tooltip>
</div>
<!-- b-tooltip.vue -->

Обзор

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

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

Цель

Целью является элемент триггер (или компонент), который вызовет всплывающее сообщение. Цель указывается с помощью свойства target и может быть любой из следующих:

• Строка, идентифицирующая идентификатор триггерного элемента (или идентификатор корневого элемента компонента)
• Ссылка (ref) на HTMLElement или SVGElement (например, через this.$refs.refName)
• Ссылка (ref) на компонент, который имеет либо HTMLElement, либо SVGElement в качестве корневого элемента (например, через this.$refs.refName)
• Функция (callback), которая возвращает ссылку на HTMLElement или SVGElement

Для получения дополнительной информации о ссылках см. официальную документацию Vue.

Примечание:

Целевой элемент должен существовать в документе, прежде чем <b-tooltip> будет смонтирован. Если целевой элемент не найден во время монтирования, всплывающая подсказка никогда не откроется. Всегда размещайте компонент <b-tooltip> ниже в DOM, чем целевой элемент. Это правило также применяется, если функция обратного вызова используется в качестве целевого элемента, поскольку этот обратный вызов вызывается только один раз при монтировании.

HTMLElement относится к стандартным элементам HTML, таким как <div>, <button> и т. д., а SVGElement относится к <svg> или поддерживаемым дочерним элементам SVG.

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

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

Смотрите документацию Директива Tooltip для живых примеров позиционирования.

Триггеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<b-tooltip>

<b-container fluid>
  <b-row>
    <b-col md="4">
      <b-button variant="outline-success">Живой чат</b-button>
    </b-col>
    <b-col md="4">
      <b-button variant="outline-success">Html-чат</b-button>
    </b-col>
    <b-col md="4">
      <b-button ref="button-3" variant="outline-success">Альтернативный чат</b-button>
    </b-col>
  </b-row>
  <!-- Tooltip title specified via prop title -->
  <b-tooltip target="button-1" title="Онлайн!"></b-tooltip>
  <!-- HTML title specified via default slot -->
  <b-tooltip target="button-2" placement="bottom">
    Привет <strong>Мир!</strong>
  </b-tooltip>
  <!-- Tooltip for an element identified by ref -->
  <b-tooltip :target="() => $refs['button-3']" title="Альтернатива!"></b-tooltip>
</b-container>
<!-- b-tooltip-component. vue -->

Варианты компонентов

Свойство	По умолчанию	Описание	Поддерживаемые значения
target	null	Идентификатор строки элемента, или ссылка на элемент или компонент, или функция, возвращающая любой из них, для которых вы хотите вызвать всплывающую подсказку Обязательно	Любой допустимый уникальный идентификатор элемента в документе, ссылка на элемент или компонент или функция, возвращающая любой такой идентификатор/ссылку
title	null	Содержимое всплывающей подсказки (только текст, без HTML). если требуется HTML, поместите его в слот по умолчанию	Обычный текст
placement	'top'	Положение всплывающей подсказки относительно триггерного элемента	top, bottom, left, right, auto, topleft, topright, bottomleft, bottomright, lefttop, leftbottom, righttop, rightbottom
fallback-placement	'flip'	Автоматическое переворачивание поведения всплывающей подсказки относительно триггерного элемента	flip, clockwise, counterclockwise или массив допустимых мест размещения, оцениваемых слева направо
triggers	'hover focus'	Разделенный пробелами список событий, которые вызовут открытие/закрытие всплывающей подсказки	hover, focus, click. Обратите внимание, что blur — это специальный вариант использования для закрытия всплывающей подсказки при следующем щелчке, обычно используемый в сочетании с click.
no-fade	false	Отключить анимацию затухания, если установлено значение true	true или false
delay	50	Задержка отображения и скрытия всплывающей подсказки на указанное количество миллисекунд. Также может быть указан как объект в форме { show: 100, hide: 400 }, что позволяет отображать и скрывать различные задержки.	0 и выше, только целые числа.
offset	0	Сместить центр всплывающей подсказки на указанное количество пикселей	Любое отрицательное или положительное целое число
container	null	Идентификатор строки элемента, к которому добавляется визуализированная всплывающая подсказка. Если null или элемент не найден, всплывающая подсказка добавляется к <body> (по умолчанию)	Любой действительный уникальный идентификатор элемента в документе.
boundary	'scrollParent'	Контейнер, в котором всплывающая подсказка будет визуально ограничена. В большинстве случаев должно быть достаточно значения по умолчанию, но вам может потребоваться изменить его, если ваш целевой элемент находится в небольшом контейнере с прокруткой переполнения	'scrollParent' (по умолчанию), 'viewport', 'window' или ссылка на элемент HTML.
boundary-padding	5	Количество пикселей, используемое для определения минимального расстояния между границами и всплывающей подсказкой. Это гарантирует, что всплывающая подсказка всегда имеет небольшой отступ между краями своего контейнера	Любое положительное число
noninteractive	false	Должна ли всплывающая подсказка быть интерактивной с пользователем	true или false
variant	null	Контекстный вариант цвета всплывающей подсказки	Название любого контекстного варианта цвета темы
custom-class	null	Пользовательское имя класса для применения к элементу внешней оболочки всплывающей подсказки	Строка
id	null	Идентификатор для использования в корневом элементе всплывающей подсказки. Если ничего не указано, оно будет сгенерировано автоматически. Если вы предоставляете идентификатор, он должен быть уникальным на отображаемой странице	Действительная строка уникального идентификатора элемента

Неинтерактивные всплывающие подсказки

Подсказки BootstrapVue по умолчанию интерактивны для пользователя из соображений доступности. Чтобы восстановить поведение Bootstrap по умолчанию, примените свойство noninteractive:

<div>
  <div>
    <b-button>Моя подсказка интерактивна</b-button>
    <b-tooltip target="tooltip-button-interactive">Я буду оставаться открытым при наведении</b-tooltip>
  </div>
  <div>
    <b-button>Мой не...</b-button>
    <b-tooltip target="tooltip-button-not-interactive" noninteractive>Поймай меня, если сможешь!</b-tooltip>
  </div>
</div>
<!-- b-tooltip-interactive.vue -->

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

Всплывающие окна BootstrapVue поддерживают контекстные цветовые варианты через наш собственный CSS, через свойство variant:

<div>
  <b-button>Кнопка</b-button>
  <b-tooltip target="tooltip-button-variant" variant="danger">Подсказка об опасности</b-tooltip>
</div>
<!-- b-tooltip-variant. vue -->

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

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

<div>
  <b-button>Кнопка</b-button>
  <b-tooltip target="my-button" custom-class="my-tooltip-class">Заголовок всплывающей подсказки</b-tooltip>
</div>

variant и custom-class являются реактивными и могут быть изменены, когда всплывающая подсказка открыта.

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

Программно показать и скрыть всплывающую подсказку

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

<template>
  <div>
    <div>
      <b-button variant="primary">У меня есть подсказка</b-button>
    </div>
    <div>
      <b-button @click="show = !show">Переключить подсказку</b-button>
    </div>
    <b-tooltip :show.sync="show" target="tooltip-button-1" placement="top">
      Привет <strong>Мир!</strong>
    </b-tooltip>
  </div>
</template>
<script>
  export default {
    data: {
      show: true
    }
  }
</script>
<!-- b-tooltip-show-sync. vue -->

Чтобы всплывающая подсказка отображалась при начальном рендеринге, просто добавьте параметр show в <b-tooltip>:

<div>
  <b-button variant="primary">Кнопка</b-button>
  <b-tooltip show target="tooltip-button-2">Я начинаю открывать</b-tooltip>
</div>
<!-- b-tooltip-show-open.vue -->

На программное управление также можно воздействовать, отправляя события 'open' и 'close' во всплывающую подсказку по ссылке.

<template>
  <div>
    <div>
      <b-button variant="primary">У меня есть подсказка</b-button>
    </div>
    <div>
      <b-button @click="onOpen">Открыть</b-button>
      <b-button @click="onClose">Закрыть</b-button>
    </div>
    <b-tooltip ref="tooltip" target="tooltip-button-show-event">
      Привет <strong>Мир!</strong>
    </b-tooltip>
  </div>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this. $refs.tooltip.$emit('open')
      },
      onClose() {
        this.$refs.tooltip.$emit('close')
      }
    }
  }
</script>
<!-- b-tooltip-show-ref-event.vue -->

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

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

Вы можете отключить всплывающую подсказку с помощью синхронизируемой логического свойства disabled (по умолчанию false) установка значения true отключит всплывающую подсказку. Если всплывающая подсказка в настоящее время видна, когда для параметра disabled установлено значение false, всплывающая подсказка будет оставаться видимой до тех пор, пока она не будет включена или программно закрыта. Если всплывающая подсказка отключена/включена с помощью событий $root (смотрите ниже), ваше значение disabled будет обновлено, если вы указали модификатор свойства .sync.

<template>
  <div>
    <div>
      <b-button variant="primary">У меня есть подсказка</b-button>
    </div>
    <div>
      <b-button @click="disabled = !disabled">
        {{ disabled ? 'Enable' : 'Disable' }} Подсказка по свойству
      </b-button>
      <b-button @click="disableByRef">
        {{ disabled ? 'Enable' : 'Disable' }} Подсказка по событию $ref
      </b-button>
      <b-tooltip :disabled.sync="disabled" ref="tooltip" target="tooltip-button-disable">
        Привет <strong>Мир!</strong>
      </b-tooltip>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        disabled: false
      }
    },
    methods: {
      disableByRef() {
        if (this. disabled) {
          this.$refs.tooltip.$emit('enable')
        } else {
          this.$refs.tooltip.$emit('disable')
        }
      }
    }
  }
</script>
<!-- b-tooltip-disable.vue -->

Примечание: В приведенном выше примере, поскольку мы используем триггеры всплывающей подсказки по умолчанию focus hover, всплывающая подсказка закроется до того, как она будет отключена из-за потери фокуса (и наведения) на кнопку-переключатель.

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

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

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

v-b-tooltip

Директива v-b-tooltip делает добавление всплывающих подсказок еще проще без дополнительной разметки-заполнителя:

<b-container fluid>
  <b-row>
    <b-col md="6">
      <b-button v-b-tooltip title="Онлайн!" variant="outline-success">Живой чат</b-button>
    </b-col>
    <b-col md="6">
      <b-button
        v-b-tooltip.html
        title="Привет <strong>Мир!</strong>"
        variant="outline-success"
      >
        Html-чат
      </b-button>
    </b-col>
  </b-row>
</b-container>
<!-- b-tooltip-directive.vue -->

Обратитесь к документации v-b-tooltip для получения дополнительной информации и функций формата директивы.

‘Global’ события экземпляра $root

Используя экземпляр $root, можно генерировать и прослушивать события где-то вне компонента, где используется <b-collapse>. Короче говоря, $root ведет себя как глобальный источник и слушатель событий. Подробности об экземпляре $root можно найти в официальной документации Vue.

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

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

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

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

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

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

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 всплывающей подсказки (если он был предоставлен через свойство id) в качестве аргумента:

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

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

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

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

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

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

Прослушивание изменений всплывающей подсказки с помощью событий $root

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

export default {
  mounted() {
    this. $root.$on('bv::tooltip::show', bvEvent => {
      console.log('bvEvent:', bvEvent)
    })
  }
}

Полный список событий смотрите в документации вразделе События.

Доступность

Элемент триггера, когда отображается всплывающая подсказка, будет иметь атрибут aria-describedby, установленный с автоматически сгенерированным идентификатором всплывающей подсказки.

Примечание: Эффект анимации этого компонента зависит от медиа-запроса prefers-reduced-motion. Дополнительную информацию смотрите в разделе с уменьшенным движением в нашей документации по специальным возможностям.

Справочник по компонентам

<b-tooltip>

Смотреть источник

• <b-tooltip> Свойства
• <b-tooltip> Слоты
• <b-tooltip> События
• <b-tooltip> $root Прослушиватели событий

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
boundary	HTMLElement или Object или String	'scrollParent'	Граничное ограничение всплывающей подсказки: ‘scrollParent’, ‘window’, ‘viewport’ или ссылка на HTMLElement или компонент
boundary-padding	Number или String	50	Всплывающая подсказка будет пытаться держаться подальше от края граничного элемента на указанное количество пикселей
container	HTMLElement или Object или String		Элемент-контейнер для добавления визуализируемой всплывающей подсказки, когда она видна. По умолчанию для элемента body
custom-class	String		Класс (или классы) CSS для применения к корневому элементу всплывающей подсказки
delay	Number или Object или String	50	Значение для отображения и скрытия задержки. Применяется как для отображения, так и для скрытия, если указано как число или строка. Используйте форму объекта, чтобы настроить отображение и скрытие задержек по отдельности
disabled	Boolean	false	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
fallback-placement	Array или String	'flip'	Размещение для использования, когда всплывающая подсказка выходит за границы. Обратитесь к документации для более подробной информации
id	String		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
no-fade	Boolean	false	Если установлено значение `true`, отключает анимацию затухания/переход на компоненте
noninteractive v2. 2.0+	Boolean	false	Должна ли всплывающая подсказка быть интерактивной с пользователем
offset	Number или String	0	Смещение (в пикселях) центра стрелки по сравнению с целевым элементом триггера
placement	String	'top'	Размещение всплывающей подсказки: Одно из ‘top’, ‘bottom’, ‘right’, ‘left’, ‘topleft’, ‘topright’, ‘bottomleft’, ‘bottomright’, ‘lefttop’, ‘leftbottom’, ‘righttop’, ‘rightbottom’
show	Boolean	false	При установке будет отображаться всплывающая подсказка
target Обязательный	HTMLElement или SVGElement или Function или Object или String		Идентификатор строки элемента или ссылка на элемент или компонент, для которого вы хотите вызвать всплывающую подсказку
title	String		Текст для размещения во всплывающей подсказке
triggers	Array или String	'hover focus'	Укажите, какие триггеры будут отображать всплывающую подсказку. Поддерживаемые значения: ‘click’, ‘hover’, ‘focus’. Обратитесь к документации для специальных триггеров ‘blur’ и ‘manual’
variant	String		Применяет к компоненту один из цветовых вариантов темы Bootstrap

Слоты

Наименование	Описание
default	Слот для всплывающей подсказки (поддерживается HTML/компоненты)

События

Событие (Click to sort ascending)	Аргументы	Описание
bv::tooltip::disabled	bvEvent — Объект BvEvent	Генерируется в $root, когда всплывающая подсказка становится отключенной
bv::tooltip::enabled	bvEvent — Объект BvEvent	Генерируется в $root, когда всплывающая подсказка становится включенной
bv::tooltip::hidden	bvEvent — Объект BvEvent	Генерируется в $root, когда всплывающая подсказка скрыта
bv::tooltip::hide	bvEvent — Объект BvEvent. Отменяемый	Генерируется в $root, когда всплывающая подсказка собирается быть скрытой. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить скрытие
bv::tooltip::show	bvEvent — Объект BvEvent. Отменяемый	Генерируется в $root, когда должна быть показана всплывающая подсказка. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить показ
bv::tooltip::shown	bvEvent — Объект BvEvent	Генерируется в $root, когда отображается всплывающая подсказка
disabled	bvEvent — Объект BvEvent	Генерируется, когда всплывающая подсказка становится отключенной
enabled	bvEvent — Объект BvEvent	Генерируется, когда всплывающая подсказка становится включенной
hidden	bvEvent — Объект BvEvent	Генерируется, когда всплывающая подсказка скрыта
hide	bvEvent — Объект BvEvent. Отменяемый	Генерируется, когда всплывающая подсказка собирается быть скрытой. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить скрытие
show	bvEvent — Объект BvEvent. Отменяемый	Генерируется, когда всплывающая подсказка вот-вот будет показана. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить показ
shown	bvEvent — Объект BvEvent	Генерируется, когда отображается всплывающая подсказка

$root слушатели событий

Вы можете управлять <b-tooltip>, генерируя следующие события на $root:

Событие	Аргументы	Описание
bv::disable::tooltip	id — Идентификатор всплывающей подсказки для отключения (необязательно)	Отключить всю или конкретную всплывающую подсказку, когда это событие генерируется в $root
bv::enable::tooltip	id — Идентификатор всплывающей подсказки для включения (необязательно)	Включить все или определенную всплывающую подсказку, когда это событие генерируется в $root
bv::hide::tooltip	id — Идентификатор всплывающей подсказки, которую нужно скрыть (необязательно)	Закрыть (скрыть) все или конкретную открытую всплывающую подсказку, когда это событие генерируется в $root
bv::show::tooltip	id — Идентификатор всплывающей подсказки для отображения (необязательно)	Открыть (показать) все или определенную всплывающую подсказку, когда это событие генерируется в $root

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

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

Компонент	Именованный экспорт	Путь импорта
<b-tooltip>	BTooltip	bootstrap-vue

Пример:

import { BTooltip } from 'bootstrap-vue'
Vue. component('b-tooltip', BTooltip)

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

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

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

Этот плагин также автоматически включает следующие плагины:

• VBTooltipPlugin

Пример:

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

Как сделать всплывающую подсказку в HTML и CSS?

Категория: Сайтостроение, Опубликовано: 2017-07-28
Автор: Юлия Гусарь

Приветствую вас на сайте Impuls-Web!

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

В сегодняшней статье я покажу вам два простых способа, с помощью которых с легкостью делается всплывающая подсказка html-кодом и css-стилями.

Навигация по статье:

• Всплывающая подсказка HTML
• Всплывающая подсказка CSS

Всплывающая подсказка HTML

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

Например:

<a href=»#» title=»Скачайте свежий прайс-лист»>Скачать</a>

<a href=»#» title=»Скачайте свежий прайс-лист»>Скачать</a>

Результат:
Скачать

Или вот еще один пример с использованием картинки:

<a href=»//impuls-web.ru/css-animaciya-poyavleniya-bez-plaginov/»> <img src=»//impuls-web.ru/wp-content/uploads/2017/06/animate-min.jpg» alt=»CSS анимация для сайта» title=»Перейти на статью: CSS-анимация появления без плагинов»/> </a>

<a href=»//impuls-web.ru/css-animaciya-poyavleniya-bez-plaginov/»> <img src=»//impuls-web.ru/wp-content/uploads/2017/06/animate-min.jpg» alt=»CSS анимация для сайта»  title=»Перейти на статью: CSS-анимация появления без плагинов»/> </a>

Результат:

Как видите все просто, но данная всплывающая подсказка html имеет ряд своих недостатков. А именно, все параметры отображения, такие как шрифт, цвет, размер задаются исходя из параметров браузера, и вы ни как не можете на них повлиять.

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

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

HTML-код:

<div> <a href=»//impuls-web.ru/kak-zadat-rasstoyanie-mezhdu-strok-css/»><img src=»//impuls-web.ru/wp-content/uploads/2017/07/line-height.jpg» alt=»Расстояние между строк CSS» /></a> <div>Перейти на статью: Как задать расстояние между строк CSS?</div> </div>

1 2 3 4 5 6 7

<div>   <a href=»//impuls-web. ru/kak-zadat-rasstoyanie-mezhdu-strok-css/»><img src=»//impuls-web.ru/wp-content/uploads/2017/07/line-height.jpg» alt=»Расстояние между строк CSS» /></a>   <div>Перейти на статью: Как задать расстояние между строк CSS?</div>   </div>

CSS-стили:

.img-text{ position:relative; display:block; width:300px; /*задаём ширину блока*/ margin:auto; } .podskazka{ margin:0px!important; opacity: 0; position: absolute; width: 100%; left: 0; /*отступ слева*/ top: 105px; /*отступ сверху*/ padding:8px 0px; font-weight:bold; background: #444; /*задаём цвет фона*/ color: #fff!important; text-align: center; /*выравнивание текста*/ font-size: 14px; /*размер шрифта*/ transition: all 0.6s; } .img-text:hover .podskazka{ opacity: 0.8; /*задаём уровень прозрачности*/ }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

. img-text{ position:relative; display:block; width:300px; /*задаём ширину блока*/ margin:auto; }   .podskazka{ margin:0px!important; opacity: 0; position: absolute; width: 100%; left: 0; /*отступ слева*/ top: 105px; /*отступ сверху*/ padding:8px 0px; font-weight:bold; background: #444; /*задаём цвет фона*/ color: #fff!important; text-align: center; /*выравнивание текста*/ font-size: 14px; /*размер шрифта*/ transition: all 0.6s; }   .img-text:hover .podskazka{ opacity: 0.8; /*задаём уровень прозрачности*/ }

Вот что получится:

Перейти на статью: Как задать расстояние между строк CSS?

Данными стилями мы задаем стилизацию нашей подсказке и делаем ее полностью прозрачной. А далее при наведении указателя мышки на картинку, делаем ее видимой.

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

Надеюсь, моя статья будет для вас полезна и поможет вам сделать удобные и информативные подсказки. Если данная статья вам понравилась, обязательно оставьте комментарий, поделитесь ею в социальных сетях и подпишитесь на мою рассылку.

Желаю вам удачи! До встречи в следующих статьях!

С уважением Юлия Гусарь

css всплывающая подсказка при наведении на текст

Автор admin На чтение 6 мин. Просмотров 104 Опубликовано 15.12.2019

В HTML уже есть глобальный атрибут title , который можно добавить к любому элементу веб-страницы. Наличие этого атрибута добавляет всплывающую подсказку, которая появляется при наведении курсора мыши на элемент. Шрифт текста, размер подсказки и её вид в целом зависит от операционной системы и не может быть изменён с помощью стилей. К тому же многих разработчиков не устраивает, что такая подсказка довольно быстро исчезает. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом. Конечно, самый универсальный способ заключается в использовании JavaScript, но в некоторых случаях вполне достаточно обойтись и одним CSS.

В качестве примера я выбрал фотографии, при наведении на них курсора мыши показывается название фотографии. Сам вывод текста будем делать при помощи свойства content и брать значение текста из какого-либо атрибута через attr() . К сожалению, content не будет работать желаемым образом в сочетании с img , поэтому фотографии вставляются в элемент

Пример 1. Код HTML

HTML5 IE Cr Op Sa Fx

Переходим к стилю нашей подсказки. Вначале надо сделать, чтобы она вообще появлялась. Для этого воспользуемся псевдоэлементом ::after , к которому добавляем content: attr(data-title) .

Получится, что после содержимого элемента с классом photo будет выводиться текст из атрибута data-title , что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover .

Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).

Пример 2. Стиль подсказки

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид всплывающей подсказки

Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).

Пример 3. Вывод подсказки внизу фотографии

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Вид всплывающей подсказки

К сожалению, свойство transition , с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after . Впрочем, если заменить этот псевдоэлемент на :after , то можно получить более-менее работающий вариант.

Бывают случаи, когда нужно сделать простую всплывающую подсказку без подключения различных библиотек, нагружающих страницу. Для этого удобно будет воспользоваться data атрибутами, с помощью которых будем хранить текстовую информацию всплывающей подсказки.

data атрибут должен начинаться с «data-» и продолжаться уже любым именем. Например, для хранения текста подсказки используем атрибут data-info=»Мой текст подсказки».

Дата публикации: 2016-10-20

От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в html всплывающую подсказку разными способами.

Содержание

1. Стандартная подсказка
2. Способ на чистом css
3. Способ 2. Чистый css и плавное появление

Стандартная подсказка

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:

Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.

Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.

Способ на чистом css

Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:

Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.

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

Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.

Далее позиционируем элемент абсолютно, задаем произвольно цвет и фон, шрифт, выравнивание, отступы и ширину. В итоге на выходе получается вот что:

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

Способ 2. Чистый css и плавное появление

Впрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.

Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной. Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах

Все права защищены © 2019
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки

Простая реализация всплывающей подсказки — Русские Блоги

Я реализовал более сложную подсказку:

TipLite Легкие Ext советы

впозиционировать все в статье упомянул очень простую реализацию, которая опирается на элемент, который не устанавливает атрибут позиции css (слева, справа, сверху, снизу) после того, как абсолютное позиционирование сохраняется на его позиции перед позиционированием, и в то же время Элемент абсолютного позиционирования и окружающие элементы находятся в разных слоях, и затем используют функцию автоматического позиционирования блока после абсолютного позиционирования элемента, устанавливают margin-top, margin-left для перемещения позиции элемента, полностью решают общий эффект и избегают сложных сценариев, используют в простых случаях a имеет естественную кроссплатформенную природу, но конкретное объяснение автора движения маржи не очень понятно.

Демонстрация расширенного эффекта:

Вы можете установить блокировку, чтобы избавиться от ограничения встроенной всплывающей подсказки. (правила вложенности chrome требуют строгого). Используйте наведение псевдосостояния div (т.е. исправление сценария 6), вы можете установить всплывающую подсказку во всем контейнере и дополнительную подсказку макета.

Демо-код @google

Шаг Цзоу:

1. Подготовьте вкладки страницы

 

	<p>
			Очень простая подсказка, <div id = "s" class = "tool" href = "#"> pass me <div class = "tooltip">
 <div class = "title"> Я - заголовок </ div> <div class = "content"> Я - конкретный контент, я - конкретный контент </ div>
 </ div> </ div> вы знаете
		</p>

 

.tooltip — быстрый контент

2. Начальный CSS

Используйте поле, чтобы установить относительную позицию всплывающей подсказки, скрыть подсказку (вытащить из экрана)

 

. tooltip {
			background:none repeat scroll 0 0 #444466;
			border:1px solid white;
			color:white;
			font-weight:bold;
			left:-999em;
			width:150px;
			padding:2px 4px;
			position:absolute;
			text-decoration:none;
			margin-top:0.5em;
			margin-left:-1em;  
 / * Для браузеров без IE элементы блока будут перенесены! * /
			display:inline;
			/*
			display:inline-block;
			ie inline-block ...
			*zoom:1;
			*display:inline;*/			
		}
.tooltip .title {
				font-size:1.5em;
				text-align:center;
			}
			.tooltip .content {
				padding:5px;
			}

 

Обработка 3.hover

Просто потяните подсказку. Оставьте значение по умолчанию auto, то есть сохраняйте позицию, рассчитанную исходным механизмом рендеринга.

 

.tool:hover .tooltip {
				left:auto;
				
			}

 

Чуть выше:

1. Свободный от сложных скриптов (т.е. 6 требует наведения ревизии скрипта), полная совместимость с браузером, более выразительный, чем заголовок.

2. Однако движение мыши не учитывается, что отличается от оригинального заголовка.

положение движения маржи

Посттекстовый анализ Зачем устанавливать отрицательное поле слева вместо положительного поля справа, чтобы переместить элемент влево У меня другое понимание от оригинального автора:

Когда механизм рендеринга размещает элементы, он учитывает margin-border-padding-width / height элемента. Занятая область отображаемой страницы вычисляется как:

margin+padding+width/height+border

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

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

Иконка:

 

Затем движок занимает область рендеринга слева направо, сверху вниз и размещает их позиции в соответствии с вычислением каждого элемента. Когда установлен отрицательный margin-left, внешний край margin-left фактически находится с правой стороны границы, потому что внешний margin-left Если элемент занимает область рендеринга для внешнего выравнивания, кажется, что граница смещена влево, когда для него установлено положительное поле или поле 0, а отрицательное или положительное поле справа-вправо. Из-за характеристик механизма рендеринга слева направо, Это не влияет на фактическое положение элемента.

 

PS: OReilly.CSS.The.Definitive.Guide также упомянул эту проблему в главе с плавающей точкой:

 

 

The CSS1 and CSS2 specifications explicitly state that user agents are not required to reflow previous content to accommodate things that happen later in the document. In other words, if an image is floated up into a previous paragraph, it may simply overwrite whatever was already there.

 

 

Подсказка CSS

❮ Назад Далее ❯

---

Создание всплывающих подсказок с помощью CSS.

---

Демонстрация: примеры подсказок

Подсказка часто используется для указания дополнительной информации о чем-либо, когда пользователь наводит указатель мыши на элемент:

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

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

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

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

---

Основная подсказка

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

Пример

Попробуйте сами »

Объяснение примера

HTML: Используйте элемент-контейнер (например,