Содержание

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 -->

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

СвойствоПо умолчаниюОписаниеПоддерживаемые значения
targetnullИдентификатор строки элемента, или ссылка на элемент или компонент, или функция, возвращающая любой из них, для которых вы хотите вызвать всплывающую подсказку ОбязательноЛюбой допустимый уникальный идентификатор элемента в документе, ссылка на элемент или компонент или функция, возвращающая любой такой идентификатор/ссылку
titlenullСодержимое всплывающей подсказки (только текст, без 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-fadefalseОтключить анимацию затухания, если установлено значение truetrue или false
delay50Задержка отображения и скрытия всплывающей подсказки на указанное количество миллисекунд. Также может быть указан как объект в форме { show: 100, hide: 400 }, что позволяет отображать и скрывать различные задержки.0 и выше, только целые числа.
offset0Сместить центр всплывающей подсказки на указанное количество пикселейЛюбое отрицательное или положительное целое число
containernullИдентификатор строки элемента, к которому добавляется визуализированная всплывающая подсказка. Если null или элемент не найден, всплывающая подсказка добавляется к <body> (по умолчанию)Любой действительный уникальный идентификатор элемента в документе.
boundary'scrollParent'Контейнер, в котором всплывающая подсказка будет визуально ограничена. В большинстве случаев должно быть достаточно значения по умолчанию, но вам может потребоваться изменить его, если ваш целевой элемент находится в небольшом контейнере с прокруткой переполнения'scrollParent' (по умолчанию), 'viewport', 'window' или ссылка на элемент HTML.
boundary-padding5Количество пикселей, используемое для определения минимального расстояния между границами и всплывающей подсказкой. Это гарантирует, что всплывающая подсказка всегда имеет небольшой отступ между краями своего контейнераЛюбое положительное число
noninteractivefalseДолжна ли всплывающая подсказка быть интерактивной с пользователемtrue или false
variantnullКонтекстный вариант цвета всплывающей подсказкиНазвание любого контекстного варианта цвета темы
custom-classnullПользовательское имя класса для применения к элементу внешней оболочки всплывающей подсказкиСтрока
idnullИдентификатор для использования в корневом элементе всплывающей подсказки. Если ничего не указано, оно будет сгенерировано автоматически. Если вы предоставляете идентификатор, он должен быть уникальным на отображаемой страницеДействительная строка уникального идентификатора элемента

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

Подсказки 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 или String50Всплывающая подсказка будет пытаться держаться подальше от края граничного элемента на указанное количество пикселей
container
HTMLElement или Object или StringЭлемент-контейнер для добавления визуализируемой всплывающей подсказки, когда она видна. По умолчанию для элемента body
custom-class
StringКласс (или классы) CSS для применения к корневому элементу всплывающей подсказки
delay
Number или Object или String50Значение для отображения и скрытия задержки. Применяется как для отображения, так и для скрытия, если указано как число или строка. Используйте форму объекта, чтобы настроить отображение и скрытие задержек по отдельности
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
fallback-placement
Array или String'flip'Размещение для использования, когда всплывающая подсказка выходит за границы. Обратитесь к документации для более подробной информации
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
no-fade
BooleanfalseЕсли установлено значение `true`, отключает анимацию затухания/переход на компоненте
noninteractive
v2. 2.0+
BooleanfalseДолжна ли всплывающая подсказка быть интерактивной с пользователем
offset
Number или String0Смещение (в пикселях) центра стрелки по сравнению с целевым элементом триггера
placement
String'top'Размещение всплывающей подсказки: Одно из ‘top’, ‘bottom’, ‘right’, ‘left’, ‘topleft’, ‘topright’, ‘bottomleft’, ‘bottomright’, ‘lefttop’, ‘leftbottom’, ‘righttop’, ‘rightbottom’
show
BooleanfalseПри установке будет отображаться всплывающая подсказка
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
  1. bvEvent — Объект BvEvent
Генерируется в $root, когда всплывающая подсказка становится отключенной
bv::tooltip::enabled
  1. bvEvent — Объект BvEvent
Генерируется в $root, когда всплывающая подсказка становится включенной
bv::tooltip::hidden
  1. bvEvent — Объект BvEvent
Генерируется в $root, когда всплывающая подсказка скрыта
bv::tooltip::hide
  1. bvEvent — Объект BvEvent. Отменяемый
Генерируется в $root, когда всплывающая подсказка собирается быть скрытой. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить скрытие
bv::tooltip::show
  1. bvEvent — Объект BvEvent. Отменяемый
Генерируется в $root, когда должна быть показана всплывающая подсказка. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить показ
bv::tooltip::shown
  1. bvEvent — Объект BvEvent
Генерируется в $root, когда отображается всплывающая подсказка
disabled
  1. bvEvent — Объект BvEvent
Генерируется, когда всплывающая подсказка становится отключенной
enabled
  1. bvEvent — Объект BvEvent
Генерируется, когда всплывающая подсказка становится включенной
hidden
  1. bvEvent — Объект BvEvent
Генерируется, когда всплывающая подсказка скрыта
hide
  1. bvEvent — Объект BvEvent. Отменяемый
Генерируется, когда всплывающая подсказка собирается быть скрытой. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить скрытие
show
  1. bvEvent — Объект BvEvent. Отменяемый
Генерируется, когда всплывающая подсказка вот-вот будет показана. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить показ
shown
  1. 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>BTooltipbootstrap-vue

Пример:

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

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

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

Именованный экспорт

Путь импорта

TooltipPluginbootstrap-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 Опубликовано

В 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.


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

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

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

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

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

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


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

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

Пример

Наведение надо мной
  Подсказка text

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

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

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

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

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

CSS: Всплывающая подсказка class use position:relative , который необходим для позиционирования текста всплывающей подсказки ( position:absolute ). Примечание: См. ниже примеры того, как расположить всплывающую подсказку.

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

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

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

с помощью класс="подсказка" .



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

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

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

.tooltip .tooltiptext {
  top: -5px;
оставил: 105%;
}

Результат:

Наведите курсор на меня Текст подсказки

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

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

.tooltip .tooltiptext {
  top: -5px;
Правильно: 105%;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

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

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

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

.tooltip .tooltiptext {
  ширина: 120 пикселей;
низ: 100%;
  осталось: 50%;
  левое поле: -60 пикселей; /* Использовать половину ширины (120/2 = 60), чтобы центрировать всплывающую подсказку */
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

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

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

.tooltip .tooltiptext {
  ширина: 120 пикселей;
  сверху: 100 %;
  осталось: 50%;
  левое поле: -60 пикселей; /* Использовать половину ширины (120/2 = 60), чтобы центрировать всплывающую подсказку */
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

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


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

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

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

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

.tooltip .tooltiptext::after {
  content: » «;
  позиция: абсолютная;
  сверху: 100 %; /* Внизу подсказки */
  left: 50%;
  левое поле: -5 пикселей;
ширина границы: 5px;
  стиль границы: сплошной;
цвет границы: черный прозрачный прозрачный прозрачный;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

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

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

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

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

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

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

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

.tooltip .tooltiptext::after {
  содержимое: » «;
  позиция: абсолютная;
  внизу: 100 %; /* В верхней части всплывающей подсказки */
  left: 50%;
  левое поле: -5 пикселей;
ширина границы: 5px;
  стиль границы: сплошной;
цвет границы: прозрачный прозрачный черный прозрачный;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

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

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

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

. tooltip .tooltiptext::after {
  содержимое: » «;
  позиция: абсолютная;
  вверху: 50 %;
  справа: 100 %; /* Слева от всплывающей подсказки */
  margin-top: -5px;
ширина границы: 5px;
  стиль границы: сплошной;
цвет границы: прозрачный черный прозрачный прозрачный;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

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

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

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

.tooltip .tooltiptext::after {
  содержимое: » «;
  позиция: абсолютная;
  вверху: 50 %;
осталось: 100%; /* Справа от всплывающая подсказка */
  margin-top: -5px;
ширина границы: 5px;
  стиль границы: сплошной;
цвет границы: прозрачный прозрачный прозрачный черный;
}

Результат:

Наведите курсор на меня Текст всплывающей подсказки

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


Исчезновение всплывающих подсказок (анимация)

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

Пример

.tooltip .tooltiptext {
  непрозрачность: 0;
переход: непрозрачность 1с;
}

.tooltip:наведение .tooltiptext {
  непрозрачность: 1;
}

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

❮ Предыдущая Далее ❯


34 Подсказки CSS

Коллекция HTML и Подсказка CSS Примеры кода: анимированные, со стрелками, с эффектами наведения и т. д. Обновление коллекции за апрель 2020 года. 4 новых примера.

О коде

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

Пример всплывающей подсказки. Демонстрация с использованием нескольких различных методов CSS. Линейная анимация SVG, множественный фильтр: тень, смягчение пользовательского интерфейса материалов, …

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Подсказка градиента элемента Pure CSS 1

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Сокращенный элемент

Элемент HTML abbr представляет аббревиатуру или акроним; необязательный атрибут title может предоставить расширение или описание аббревиатуры. Заголовок, если он присутствует, должен содержать это полное описание и ничего больше. Мы можем использовать CSS, чтобы стилизовать его и сделать его более красивым. Этот текст часто представляется браузерами в виде всплывающей подсказки при наведении курсора мыши на элемент.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Cooltipz.css — классные всплывающие подсказки, созданные на чистом CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: cooltipz.css

О коде

Анимация всплывающей подсказки

Простая анимация всплывающей подсказки в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

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

HTML и CSS адаптивные всплывающие подсказки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Необычная и анимированная подсказка — только CSS

Просто всплывающая подсказка с блестящей/современной анимацией открытия. Простота в использовании: только настраиваемый атрибут data-tooltip должен быть добавлен к соответствующему элементу. Элементы, которые не могут содержать другие элементы, например input , не могут использовать всплывающую подсказку. Простым решением было бы обернуть элемент в div , а затем прикрепить всплывающую подсказку к div .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Идея всплывающей подсказки

Маленькие игривые идеи для всплывающих подсказок.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: font-awesome. css

О коде

Подсказка

Подсказка лазерной линии Pure CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

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

Только простой CSS всплывающая подсказка .

О коде

Чистая подсказка CSS

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

О коде

Подсказка

Подсказка CSS с плавной анимацией.

О коде

Подсказка Usign Just CSS

Простая всплывающая подсказка с HTML и CSS.

О коде

Подсказка CSS

Подсказка CSS с плавной анимацией.

О коде

Подсказки

Хорошие всплывающие подсказки сверху, снизу, слева и справа на чистом CSS.

Демонстрационное изображение: Дружелюбные подсказки

Дружелюбные подсказки

Дружелюбные подсказки с анимацией.
Сделано Джошуа Уордом
7 марта 2017 г.

скачать демо и код

Демонстрационное изображение: Анимированная всплывающая подсказка CSS

Анимированная всплывающая подсказка CSS

Анимированная всплывающая подсказка HTML и CSS.
Сделано Сашей
1 марта 2017 г.

скачать демо и код

Демонстрационное изображение: Подсказка

Подсказка

Это подсказка. Он работает с атрибутом данных. Просто оберните свой элемент в любой класс всплывающей подсказки ширины элемента html и добавьте свой контент в атрибут data-tooltip.
Сделано Томасом Подгродски
4 февраля 2017 г.

скачать демо и код

Демонстрационное изображение: всплывающие подсказки

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

всплывающие подсказки только с помощью CSS.
Сделано Сэмюэлем Джейнсом
27 ноября 2016 г.

скачать демо и код

Демонстрационное изображение: кнопка с подсказкой

Кнопка с подсказкой

Кнопка HTML и CSS с подсказкой.
Сделано Фабрицио Кускини
1 сентября 2016 г.

скачать демо и код

О коде

Подсказки по автоматизации с простыми атрибутами данных

Вам не нужно помещать каждый отдельный тег всплывающих подсказок в свою разметку, вам просто нужно поместить «data-tooltips» для сообщения и «data-position» для позиционирования всплывающих подсказок к элементу, который вы хотите выделить.

Демонстрационное изображение: Easy Tooltips

Easy Tooltips

Easy Tooltips с Sass.
Сделано Матеусом Коста
15 марта 2016 г.

скачать демо и код

Демонстрационное изображение: Репродукция всплывающей подсказки Google Keep

Репродукция всплывающей подсказки Google Keep

Всплывающие подсказки с круглым раскрытием. На основе всплывающих подсказок Google Keep.
Сделано Кайлом Лавери
5 марта 2016 г.

скачать демо и код

Демонстрационное изображение: Подсказки Pure CSS

Подсказки Pure CSS

Подсказки HTML и CSS.
Сделано Матиасом Мартином
17 февраля 2016 г.

скачать демо и код

Демонстрационное изображение: всплывающая подсказка Pure CSS

Pure CSS Tooltip

Простая всплывающая подсказка CSS.
Сделано Мэттом Ствартаком
3 февраля 2016 г.

скачать демо и код

Демонстрационное изображение: Пагинация всплывающей подсказки

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

Просто эксперимент 🙂
Сделано Джо Ричардсоном
24 июля 2015 г.

скачать демо и код

Демонстрационное изображение: Динамический текст всплывающей подсказки с помощью CSS

Динамический текст всплывающей подсказки с помощью CSS

Передать текст всплывающей подсказки с псевдоклассами и содержимым:»; Свойство CSS. Изменения текста будут меняться вместе с состоянием кнопки.
Сделано Джули Хорват
6 июля 2015 г.

скачать демо и код

Демонстрационное изображение: Подсказка

Подсказка

Простая всплывающая подсказка с фильтром тени.
Сделано Джеймсом Мехиа
16 июня 2015 г.

скачать демо и код

О коде

Подсказки Pure-CSS

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

Демонстрационное изображение: Подсказка только с CSS

Подсказка только с CSS

Простой пример всплывающей подсказки на чистом CSS. Содержимое загружается из атрибута данных самого тега привязки. Хорошо, если вам нужно простое решение для всплывающих подсказок.
Сделано Робертом Дугласом
19 ноября 2014 г.

скачать демо и код

Демонстрационное изображение: всплывающая подсказка только для CSS

Подсказка только для CSS

Простая всплывающая подсказка, использующая атрибут data-* и псевдоэлементы для отображения текста при наведении.
Сделано Кристиной Шнайдер
4 марта 2014 г.

скачать демо и код

Демонстрационное изображение: Простые всплывающие подсказки CSS3

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

Очень простые всплывающие подсказки с использованием компонента CSS3.
Сделано Фирдаусом Сабаином
30 декабря 2013 г.

скачать демо и код

Демонстрационное изображение: Подсказка

Подсказка

Хорошая подсказка.
Сделано г-жой Манипенни
17 апреля 2013 г.

скачать демо и код

Как создать всплывающую подсказку в формате HTML [+ Шаблоны кода]

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

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

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

Что такое всплывающая подсказка в HTML?

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

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

Вот видео от Nielsen Norman Group, объясняющее, как работают всплывающие подсказки:

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

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

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

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

Чтобы сделать простую всплывающую подсказку, мы сначала создадим элемент HTML, который вызывает всплывающую подсказку при наведении курсора. Мы создадим этот элемент как div и назначим ему класс hover-text .

 
наведите меня

Далее мы создадим сам элемент всплывающей подсказки. Это будет элемент span с классом текст всплывающей подсказки . Поместите этот элемент внутрь div hover-text , чтобы связать элемент всплывающей подсказки с родительским div.

 
наведите меня
    Я всплывающая подсказка!

Наконец, мы применим CSS к нашим элементам, чтобы задать поведение всплывающей подсказки. Самое главное, мы скрываем класс tooltip-text с видимостью : hidden и размещаем его на слое над другим содержимым страницы с z-index: 1 . Мы также будем использовать псевдокласс hover для hover-text , чтобы отображать всплывающую подсказку только тогда, когда происходит событие наведения.

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

См. всплывающую подсказку Pen HTML: пример от HubSpot (@hubspot) на CodePen.

Как сделать всплывающую подсказку со стрелкой

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

Чтобы добавить стрелку во всплывающую подсказку, вы можете использовать ::before . Это создает псевдоэлемент, который является первым дочерним элементом элемента, к которому он прикреплен (в данном случае элементы с классом tooltip-text ).

Этот новый псевдоэлемент, по сути, представляет собой пустой элемент с некоторыми отступами, повернутый на 90 градусов и расположенный таким образом, что всплывающая подсказка выглядит как речевой пузырь. Также обратите внимание, что z-индекс tooltip-text установлен на 2 . Это гарантирует, что наш псевдоэлемент всегда будет отображаться за всплывающей подсказкой и не затенит текст всплывающей подсказки.

См. всплывающую подсказку Pen HTML: пример со стрелками от HubSpot (@hubspot) на CodePen.

Как добавить эффекты к всплывающим подсказкам

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

Чтобы всплывающая подсказка появлялась и исчезала из поля зрения, мы будем использовать свойство непрозрачности CSS в сочетании со свойством перехода CSS. Непрозрачность всплывающей подсказки-текста изначально установлена ​​на 0 , что означает, что элемент невидим. Когда происходит событие наведения, его непрозрачность устанавливается на 1 , а переход : непрозрачность 0,5 с добавляет эффект плавного появления/затухания. Вы можете изменить продолжительность перехода по своему усмотрению.

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

Оба эффекта показаны в примере ниже:

См. всплывающую подсказку Pen HTML: пример с эффектами от HubSpot (@hubspot) на CodePen.

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

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

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

См. всплывающую подсказку Pen HTML: пример изображения от HubSpot (@hubspot) на CodePen.

Примеры всплывающих подсказок Creative HTML

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

Подсказка Pure CSS (источник):

См. всплывающую подсказку Pen Pure CSS от Rude (@rudeayelo) на CodePen.

Иконки социальных сетей с всплывающими окнами (источник):

См. Pen Icons Social Media with Popups (HTML + Pure CSS Only) Abdelrhman Said (@abdelrhmansaid) на CodePen.

Концепция анимированной всплывающей подсказки CSS (источник):

См. концепцию анимированной всплывающей подсказки CSS от Sasha (@sashatran) на CodePen.

Советы по HTML-подсказкам

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

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

 

Темы: HTML

Не забудьте поделиться этим постом!

Подсказки · Начальная загрузка

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

Обзор

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

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

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

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

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

 $(функция () {
  $('[data-toggle="tooltip"]').tooltip()
}) 

Примеры

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

Узкие штаны следующего уровня куфии вы, наверное, не слышали о них. Фотобудка с бородой из необработанного денима, высокой печатью, веганская сумка через плечо, Stumptown. Сейтан от фермы к столу, 8-битная американская одежда McSweeney’s Fixie из устойчивой лебеды имеет виниловое шамбре Terry Richardson. Бородатый тупиковый город, кардиганы банх ми ломо тандеркэтс. Биодизель с тофу Уильямсбург Марфа, очищающий веганский шамбре четырех локо Максуини. По-настоящему ироничный ремесленник, какой бы кейтар ни был, сценастер, от фермы до стола, Бэнкси Остин, твиттер, ручка, фриган, кредо, сырой деним, вирусный кофе одного происхождения.

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

 

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

  

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

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

Активировать всплывающую подсказку через JavaScript:

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

Разметка

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

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

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

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

 
Наведите курсор на меня

<дел> <дел> Какой-то текст всплывающей подсказки!

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

Элементы с отключенным атрибутом не являются интерактивными, то есть пользователи не могут сфокусироваться, навести курсор или щелкнуть их, чтобы вызвать всплывающую подсказку (или всплывающую подсказку). В качестве обходного пути вы захотите вызвать всплывающую подсказку из оболочки

или , в идеале сфокусируемой на клавиатуре с помощью tabindex="0" , и переопределить событий указателя на отключенный элемент.

 
  
 

Опции

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

Имя Тип По умолчанию Описание
анимация логическое значение правда Применить переход затухания CSS к всплывающей подсказке
контейнер строка | элемент | ложь ложь

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

задержка номер | объект 0

Задержка отображения и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера

Если указано число, применяется задержка как для скрытия, так и для отображения

Структура объекта: задержка: { "показать": 500, "скрыть": 100}

HTML логическое значение ложь

Разрешить HTML во всплывающей подсказке.

Если задано значение true, теги HTML в заголовке всплывающей подсказки будут отображаться во всплывающей подсказке. Если false, для вставки содержимого в DOM будет использоваться метод jQuery text .

Используйте текст, если вы беспокоитесь о XSS-атаках.

размещение строка | функция ‘верхний’

Как расположить всплывающую подсказку — авто | топ | дно | слева | Правильно.
Когда 9Если указано 0067 auto , он будет динамически переориентировать всплывающую подсказку.

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

селектор строка | ложь ложь Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для включения всплывающих окон в динамический HTML-контент. См. это и информативный пример.
шаблон строка '
'

Базовый HTML для использования при создании всплывающей подсказки.

Название всплывающей подсказки будет внедрено в . tooltip-inner .

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

Самый внешний элемент-оболочка должен иметь .tooltip класс и role="tooltip" .

наименование строка | элемент | функция »

Значение title по умолчанию, если атрибут title отсутствует.

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

триггер строка ‘наведение фокуса’

Как срабатывает всплывающая подсказка — нажмите | парить | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом.

'manual' указывает, что всплывающая подсказка будет запускаться программно с помощью методов . tooltip('show') , .tooltip('hide') и .tooltip('toggle') ; это значение нельзя комбинировать ни с каким другим триггером.

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

смещение номер | строка 0 Смещение всплывающей подсказки относительно цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
резервное размещение строка | массив ‘флип’ Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см. Документы о поведении Popper.js
граница строка | элемент ‘родительский прокрутки’ Граница ограничения переполнения всплывающей подсказки. Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации по предотвращению переполнения Popper.js.

Методы

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

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

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

$(). Подсказка (параметры)

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

.тултип('показать')

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

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

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

 $('#element').tooltip('скрыть') 
.tooltip('переключить')

Переключает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка была фактически показана или скрыта (т. е. до того, как произойдет событие visible.bs.tooltip или 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 .
показана.bs.подсказка Это событие запускается, когда всплывающая подсказка становится видимой для пользователя (будет ожидать завершения переходов CSS).
hide.bs.tooltip Это событие запускается сразу после вызова метода экземпляра hide .
скрытая.bs.подсказка Это событие запускается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
вставленная.bs.подсказка Это событие запускается после события show.bs.tooltip , когда шаблон всплывающей подсказки был добавлен в DOM.
 $('#myTooltip').on('hidden.bs.tooltip', function () {
  // сделай что-нибудь…
}) 

ARIA: Роль всплывающей подсказки — Доступность

Всплывающая подсказка — это контекстное текстовое всплывающее окно, отображающее описание элемента, которое появляется при наведении указателя мыши или фокусе клавиатуры.

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

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

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

Подсказка не соответствует роли значка дополнительной информации «i», ⓘ. Подсказка напрямую связана с элементом-владельцем. ⓘ не «описывается» подробной информацией; инструмент или контроль.

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

На элементы с ролью tooltip следует ссылаться с помощью aria-describedby до или во время отображения всплывающей подсказки. Атрибут aria-describedby находится в элементе-владельце, а не во всплывающей подсказке.

Всплывающая подсказка не считается всплывающим окном с точки зрения свойства aria-haspopup элемента-владельца, поэтому мы использовали «текстовое всплывающее окно» во вводном определении.

Хотя всплывающая подсказка может появляться и исчезать, поскольку ее появление происходит автоматически и не контролируется пользователем намеренно, aria-expanded роль не поддерживается.

Доступное имя всплывающей подсказки может происходить из содержимого или из aria-label или aria-labeled by .

Связанные роли, состояния и свойства WAI-ARIA

  • Для элемента, который служит контейнером всплывающей подсказки, установлено role="tooltip" .
  • Элемент, вызывающий всплывающую подсказку, ссылается на элемент всплывающей подсказки с aria-describedby .

Взаимодействие с клавиатурой

Escape

Закрывает всплывающую подсказку

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

Необходимые функции JavaScript

  • : Всплывающая подсказка отображается и исчезает при фокусе клавиатуры и удалении фокуса, а также по событиям мыши — наведению и удалению мыши.
  • Подсказка никогда не получает фокус. Фокус остается на владеющем элементе.
  • Подсказку можно скрыть клавишей Escape
  • Подсказка скрыта только с помощью селекторов JavaScript и CSS. Если JavaScript недоступен, отображается всплывающая подсказка.
 

Правила пароля:

<ул>
  • Минимум 8 символов.
  • Включите хотя бы одну строчную букву, одну прописную букву, одну цифру и один специальный символ
  • Уникально для этого сайта
  • Подсказку можно создать с помощью CSS. Измените имя класса с помощью JavaScript на класс, который скрывает всплывающую подсказку, если пользователь нажимает клавишу Escape .

     [роль="подсказка"],
    .hidetooltip.hidetooltip.hidetooltip + [role="tooltip"] {
      видимость: скрытая;
      положение: абсолютное;
      верх: 2рем;
      слева: 2рем;
      фон: черный;
      белый цвет;
    }
    [ария-описана]: наведите курсор,
    [ария-описана]: фокус {
      положение: родственник;
    }
    [aria-describedby]: наведение + [role="tooltip"],
    [aria-describedby]: focus + [role="tooltip"] {
      видимость: видимая;
    }
     

    Вышеупомянутое скрывает всплывающую подсказку с помощью CSS в состоянии по умолчанию или если класс hidetooltip был добавлен с помощью JavaScript (когда пользователь нажал Escape ), с высокой точностью, чтобы гарантировать, что всплывающая подсказка не отображается. Когда элемент-владелец получает фокус, он позиционируется относительно, и всплывающая подсказка становится видимой.

    Если информация достаточно важна для всплывающей подсказки, разве она не достаточно важна, чтобы всегда быть видимой?

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

    Specification
    Accessible Rich Internet Applications (WAI-ARIA)
    # tooltip
    ARIA Authoring Practices
    # tooltip
    • The dialog role
    • CSS: :фокус псевдокласс
    • Подсказки и переключатели Хейдона Пикеринга

    Последнее изменение: , от участников MDN

    Как отобразить, расположить и оформить всплывающую подсказку в HTML и CSS?

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

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

    Как создать/отобразить всплывающую подсказку

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

    HTML

    Наведите указатель мыши на меня Текст всплывающей подсказки

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

    CSS

    .tooltip {
       позиция: относительная;
       отображение: встроенный блок;
    }
    .tooltip .tooltiptext {
       видимость: скрыто;
       фоновый цвет: розово-коричневый;
        цвет: белый;
       радиус границы: 7 пикселей;
       отступ: 5 пикселей 10 пикселей;
       позиция: абсолютная;
       z-индекс: 1;
    }
    .tooltip:hover .tooltiptext {
       видимость: видимая;
    }

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

    Вывод

    Подсказка успешно создана.

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

    Как разместить всплывающую подсказку

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

    1. Верх
    2. Низ
    3. Левый
    4. Справа

    Все эти позиции показаны ниже на примерах.

    Как расположить всплывающую подсказку вверху

    Чтобы разместить всплывающую подсказку вверху, мы воспользуемся приведенным выше примером.

    CSS

    .tooltip {
       позиция: относительная;
       отображение: встроенный блок;
    }
    .tooltip .tooltiptext {
       видимость: скрыто;
       фоновый цвет: розово-коричневый;
        цвет: белый;
       радиус границы: 7 пикселей;
       отступ: 5 пикселей 10 пикселей;

       /* Для установки верхнего положения всплывающей подсказки */
       позиция: абсолютная;
       z-индекс: 1;
       снизу: 100 %;

       осталось: 60%;
       левое поле: -65 пикселей;
    }
    . tooltip:hover .tooltiptext {
       видимость: видимая;
    }

    Для позиционирования всплывающей подсказки мы используем абсолютное значение свойства position, чтобы его можно было разместить относительно элемента div. Более того, для размещения его перед элементом мы присваиваем ему порядок стека, равный 1, используя свойство z-index. Кроме того, чтобы разместить его точно над элементом, мы установили свойства bottom, left и margin-left.

    Вывод

    Подсказке присвоено верхнее положение.

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

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

    CSS

    .tooltip {
       позиция: относительная;
       отображение: встроенный блок;
    }
    .tooltip .tooltiptext {
       видимость: скрыто;
       фоновый цвет: розово-коричневый;
        цвет: белый;
       радиус границы: 7 пикселей;
       padding: 5px 10px;/* Чтобы установить нижнее положение всплывающей подсказки */
       позиция: абсолютная;
       z-индекс: 1;
       вверху: 100 %;
       осталось: 60%;
       левое поле: -65 пикселей;
    }

    . tooltip:hover .tooltiptext {
       видимость: видимая;
    }

    Абсолютное значение свойства position позиционирует всплывающую подсказку относительно элемента div. Кроме того, порядок стека всплывающей подсказки установлен на 1, чтобы поместить ее перед контейнером div. Кроме того, чтобы разместить его точно под элементом, мы установили свойства top, left и margin-left.

    Вывод

    Подсказка расположена внизу.

    Как расположить всплывающую подсказку слева

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

    CSS

    .tooltip {
       позиция: относительная;
       отображение: встроенный блок;
    }
    .tooltip .tooltiptext {
       видимость: скрыто;
       фоновый цвет: розово-коричневый;
        цвет: белый;
       радиус границы: 7 пикселей;
       отступ: 5 пикселей 10 пикселей;
       /* Для установки левой позиции всплывающей подсказки */
       position: absolute;
       z-индекс: 1;
       вверху: -6 пикселей;
       справа: 102%;
    }
    . tooltip:hover .tooltiptext {
       видимость: видимая;
    }

    Помимо позиции и свойств z-index мы также используем свойства top и right, чтобы расположить всплывающую подсказку точно слева от указанного элемента.

    Вывод

    Подсказка смещена влево.

    Как расположить всплывающую подсказку справа

    Здесь мы продемонстрировали, как можно расположить всплывающую подсказку справа от элемента.

    CSS

    .tooltip {
       позиция: относительная;
       отображение: встроенный блок;
    }
    .tooltip .tooltiptext {
       видимость: скрыто;
       фоновый цвет: розово-коричневый;
        цвет: белый;
       радиус границы: 7 пикселей;
       padding: 5px 10px;/* Чтобы установить правильное положение всплывающей подсказки */
       position: absolute;
       z-индекс: 1;
       вверху: -6 пикселей;
       осталось: 102%;
    }
    .tooltip:hover .tooltiptext {
       видимость: видимая;
    }

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

    Вывод

    Подсказка смещена вправо.

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

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

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

    Чтобы добавить стрелку, например всплывающую речь, рассмотрите пример ниже.

    CSS

    .tooltip {
       позиция: относительная;
       отображение: встроенный блок;
    }
    .tooltip .tooltiptext {
       видимость: скрыто;
       фоновый цвет: розово-коричневый;
        цвет: белый;
       радиус границы: 7 пикселей;
       отступ: 5 пикселей 10 пикселей;
       позиция: абсолютная;
       z-индекс: 1;
       снизу: 150 %;
       осталось: 50%;
       левое поле: -60 пикселей;
    }
    . tooltip .tooltiptext::after {
       content: «»;
       position: absolute;/* Для позиционирования всплывающей подсказки */
       top: 100%;
       осталось: 50%;
       левое поле: -6 пикселей;

       /* Чтобы добавить стрелку */
       border: 6px сплошная;
       border-color: розово-коричневый прозрачный прозрачный прозрачный;
    }
    .tooltip:hover .tooltiptext {
       видимость: видимая;
    }

    Здесь мы используем псевдоэлемент :after для отображения стрелки с определенной стороны всплывающей подсказки, поэтому содержимое после всплывающей подсказки остается пустым. Однако для создания стрелки используется свойство границы. Чтобы стрелка оставалась в центре всплывающей подсказки, свойствам border-width и margin-left следует присвоить одинаковые, но противоположные по знаку значения.

    Мы используем свойство border-color, чтобы придать цвет каждой границе стрелки. Только верхняя граница окрашена в розово-коричневый цвет, а остальные — в прозрачные. Если бы все это было окрашено, стрелка выглядела бы как квадрат.

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

    Вывод

    Стрелка добавлена ​​во всплывающую подсказку.

    Как добавить эффект плавного появления во всплывающей подсказке

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

    CSS

    .tooltip {
       позиция: относительная;
       отображение: встроенный блок;
    }
    .tooltip .tooltiptext {
       видимость: скрыто;
       фоновый цвет: розово-коричневый;
        цвет: белый;
       радиус границы: 7 пикселей;
       отступ: 5 пикселей 10 пикселей;
       позиция: абсолютная;
       z-индекс: 1;
       снизу: 150 %;
       осталось: 50%;
       margin-left: -60px;/* Чтобы добавить к подсказке плавный переход */
       opacity: 0;
       переход: непрозрачность 2 с;
    }
    . tooltip:hover .tooltiptext {
       видимость: видимая;
       непрозрачность: 1;
    }

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

    Выход

    Эффект плавного появления работает правильно.

    Заключение

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