Атрибут title создаёт всплывающую подсказку при наведении курсора мышки на элемент. Внешний вид подсказки изменить нельзя.

<mark title="всплывающая подсказка">содержимое</mark>

<mark title="строка 1
строка 2
строка 3">содержимое</mark>

<a href="#" title="&quot;какой-то текст&quot;">специальные символы</a>

Атрибут title не индексируется (не будет найдена страница, на которой он располагается) и не передаёт динамический вес (не будет найдена страница-акцептор): Яндекс, Google. Иначе говоря, для SEO абсолютно бесполезен. Но он удобен для пояснения второстепенных деталей посетителям, например, как это сделано на shpargalkablog.ru в верхнем меню.

Атрибут title в картинках не индексируется, но в Гугл передаёт анкорный вес странице-акцептору. В Google атрибут alt индексируется и передаёт анкорный вес: title в ссылке: Яндекс, Google
title в картинке: Яндекс, Google
alt в картинке: Яндекс, Google

Вывод:

1. меню из ссылок-картинок или логотип веб-проекта сможет «прочитать» и оценить только Google,
2. только Гугл будет учитывать атрибут alt у изображения внутри тега h в структуре заголовков страницы сайта (подробнее).

По результатам эксперимента Devaka от 2011 года (нужна перепроверка) [devaka.ru] title в теге img индексируют только Яндекс.Изображения. Сервис учитывает 275-280 символов текста, который берётся в равных частях из alt и из title. Для Картинок.Google нужен только alt.

Также следует обязательно ознакомиться с support.google.com и help.yandex.ru.

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

Документация и примеры добавления настраиваемых всплывающих подсказок 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()
})

Примеры

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

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

 <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, который вы хотите оснастить подсказкой. Генерированная разметка подсказки – проще, хотя и требует установить позицию (по умолчанию позиция задается плагином как

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

Следует добавлять подсказки лишь в те элементы 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 в дезактивированном элементе.

Параметры

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

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

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

Методы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

События

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

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

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

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

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

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

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

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

Например:

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

Результат:

Как видите все просто, но данная всплывающая подсказка 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>

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; /*задаём уровень прозрачности*/ }

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

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

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

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

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

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

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

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

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

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

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

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

Пример

/* 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:hover .tooltiptext {
    opacity: 1;
}

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

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

Демонстрация работы

Атрибут HTML title 

<a href="" title="Example of Tooltip">Tooltip</a>

Код HTML, расположенный выше, создаст следующий эффект:

Tooltip

Если навести указатель мыши на расположенную выше ссылку, появится обычная браузерная всплывающая подсказка с текстом: «Example of Tooltip» (пример всплывающей подсказки).

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

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

Есть несколько способов, чтобы задать стили всплывающим подсказкам.

Можно задать стили CSS атрибуту title и использовать псевдоэлементы :before или :after, чтобы добавить содержимое в код CSS, например, следующим образом:

[title]{
	position:relative;
}
[title]:after{
	content:attr(title);
	color:#fff;
	background:#333;
	background:rgba(51,51,51,0.75);
	padding:5px;
	position:absolute;
	left:-9999px;
	opacity:0;
	bottom:100%;
	white-space:nowrap;
	-webkit-transition:0.25s linear opacity;
}
[title]:hover:after{
	left:5px;
	opacity:1;
}

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

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

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

Вот код HTML, который понадобится для ссылок:

<a href="">adipiscing elit<span>This is the first tooltip</span></a>

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

a span{
	display:none;
	color:#fff;
	background:rgba(51,51,51,0.75);
	padding:20px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	width:100px;
	text-align:center;
	position: absolute;
	z-index:10;
}
a { display: inline-block;}
a:hover span{ display:block; }

Для начала нужно спрятать первый тег span, используя свойство display: none;, после чего задать нужные для всплывающей подсказки стили.

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

a:hover span{ display:block; }

Теперь у нас есть работающие всплывающие подсказки на чистом CSS3.

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

В примере выше все всплывающие подсказки будут одинаковыми, но как быть, если нужно задать другие стили некоторым всплывающим подсказкам? Наиболее простой способ сделать это — добавить классы тегам span, после чего задавать стили этим классам в CSS.

Если нужно изменить цвет фона с черного на другой цвет, это можно сделать, например, так:

<a href="">Duis sit amet pretium purus.<span>The blue tooltip</span>
<a href="">convallis egestas felis suscipit<span>The red tooltip</span></a>
<a href="">augue pharetra gravida<span>The yellow tooltip</span></a>
<span>The green Tooltip</span></a>

Код CSS для изменения цвета фона будет таким:

span.blue{
	background:rgba(41,137,216, 0.75);
	border:1px solid #1E5799;
}
span.red{
	background:rgba(247,49,49, 0.75);
	border:1px solid #F73131;
}
span.yellow{
	background:rgba(241,218,54, 0.75);
	border:1px solid #f1da36;
	color:black;
}
span.green{
	background:rgba(41,154,11, 0.75);
	border:1px solid #299a0b;
}

Посмотрите пример, чтобы увидеть, как это будет работать.

Демонстрация работы

Автор урока Paul Underwood

Перевод — Дежурка

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

title — HTML: язык разметки гипертекста

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

Некоторые типичные применения:

• Маркировка