Содержание

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

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


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


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

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

Top Tooltip text

Right Tooltip text

Bottom Tooltip text

Left Tooltip text


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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

class="tooltip" .



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

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

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

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

Result:

Hover over me Tooltip text

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

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

Result:

Hover over me Tooltip text

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

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

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

Result:

Hover over me Tooltip text

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

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

Result:

Hover over me Tooltip text


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

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

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

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

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

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

Result:

Hover over me Tooltip text

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

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

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

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

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

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

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

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

Result:

Hover over me Tooltip text

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

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

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

Result:

Hover over me Tooltip text

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

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

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

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

Result:

Hover over me Tooltip text


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

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

Пример

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

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

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

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

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

Обзор

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

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

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

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

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

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

Примеры

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

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

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

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

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

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

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

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

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

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

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

Разметка

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

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

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

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

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

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

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

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

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

Параметры

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

Название Тип Умолчание Описание
animation boolean true Применяет CSS-переход к подсказке
container string | element | false false

Добавляет подсказку к выбранному элементу. Пример: container: 'body'. Эта опция полезна в том, что в «потоке» документа позволяет позиционировать подсказку рядом с ее триггером — что предотвратит подсказку от «сползания» при изменении размера окна.

delay number | object 0

Откладывает показ и скрытие подсказки (мс) – не применяется к ручному типу триггера

Если цифра поддерживается, задержка применяется к обоим hide/show

Структура объекта: delay: { "show": 500, "hide": 100 }

html boolean false

Позволяет вставлять HTML в подсказку.

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

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

placement string | function ‘top’

Как позиционируется всплывающая подсказка – авто – верх – низ – лево – право.
Когда задано auto, это автоматически переориентирует подсказку.

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

selector string | false false Если селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще.
template string '<div role="tooltip"><div></div><div></div></div>'

Обычный HTML для использования при создании всплывающих подсказок.

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

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

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

title string | element | function »

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

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

trigger string ‘hover focus’

Задает, как вызывается подсказка — click | hover | focus | manual. Вы можете назначить много триггеров, разделите их пробелом.

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

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

offset number | string 0 Отступ подсказки относительно ее «цели». Для большей информации иди в документацию отступов Popper.js.
fallbackPlacement string | array ‘flip’ Позволяет задать, какую позицию Popper.js будет использовать при «откате». Для информации — сюда.
boundary string | element ‘scrollParent’ Граница ограничения overflow подсказки. Принимает значения 'viewport', 'window', 'scrollParent' или отсылку к элементу HTML (только в JavaScript). Для информации – документация по preventOverflow docs.

Методы

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

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

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

$().tooltip(options)

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

.tooltip('show')

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

События

Тип Описание
show.bs.tooltip Это событие наступает немедленно, когда экземпляр метода show вызван.
shown.bs.tooltip Это событие наступает, когда подсказка стала видимой юзеру (будет ждать завершения переходов CSS).
hide.bs.tooltip Это событие наступает немедленно, когда экземпляр метода hide вызван.
hidden.bs.tooltip Это событие наступает, когда подсказка только что прекратила быть скрытой от юзера (будет ждать завершения переходов CSS).
inserted.bs.tooltip Это событие наступает после события show.bs.tooltip, когда шаблон подсказки добавлен в DOM.
$('#myTooltip'). on('hidden.bs.tooltip', function () {
  // do something…
})

Tooltip | Components | BootstrapVue

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

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

Обзор

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

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

Цель

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

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

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

Примечание:

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

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

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

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

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

Триггеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

v-b-tooltip

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доступность

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

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

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

<b-tooltip>

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

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

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

Свойство

(Click to sort ascending)

Тип

(Click to sort ascending)

По умолчанию

Описание

boundary
HTMLElement или Object или String'scrollParent'Граничное ограничение всплывающей подсказки: ‘scrollParent’, ‘window’, ‘viewport’ или ссылка на HTMLElement или компонент
boundary-padding
Number или 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, объясняющее, как работают всплывающие подсказки: