ToolTip

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

Оглавление:
  1. ToolTip abbr
  2. ToolTip aria-label
  3. ToolTip для формы

В HTML существует много элементов с атрибутом title, значение которого пояснение, подсказка, описание и т.д. С появлением новых тегов HTML и атрибутов data-*, aria-label потребность в технологии Tooltip возросла, поскольку текст этих атрибутов в отличии от title, не предусмотрено показывать.

ToolTip abbr

Тег abbr имеет атрибут title, при наведении курсора на этот тег, подсказка будет как на снимке.

Всплывающая подсказка при наведении курсора на тег abbr
Всплывающая подсказка title

Вид подсказки не очень, кроме этого в CSS нужно указывать курсор при наведении на тег abbr.

abbr[title] {
    cursor: help;
}
Тег HTML <abbr title="Я тег HTML abbr">abbr</abbr>

Если для тега abbr добавить ещё и своё оформление всплывающей подсказки:

abbr[title] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

abbr[title]:before,
abbr[title]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

abbr[title]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(title);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

abbr[title]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

abbr[title]:hover:before,
abbr[title]:hover:after {
  visibility: visible;
  opacity: 1;
}

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

Показаны обе подсказки title и tooltip
Всплывающая подсказка title и tooltip

Чтобы показать подсказку только Tooltip, логично будет для тега abbr и любых других элементов вместо title добавлять атрибут data-tooltip.

Пример HTML:

<a href="#" data-tooltip="Всплывающая подсказка Tooltip для ссылки">Ссылка</a>

CSS

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

Хотя, есть мнения веб-разработчиков что поисковик гугл читает именно title.

к меню ↑

ToolTip aria-label

Атрибут aria-label из технологии WAI-ARIA. Значение атрибута aria-label — текст, который будет озвучен программой для чтения текста с экрана (говорушка/говорилка). Текст атрибута также можно показать при наведении курсора мыши, для примера возьмем ссылку и SVG иконки.

HTML

<a href="#" aria-label="Facebook">
  <svg class="icon"><use xlink:href="#icon-facebook"></use></svg>
</a>

<a href="#" aria-label="Twitter">
  <svg class="icon"><use xlink:href="#icon-twitter"></use></svg>
</a>

CSS

a[aria-label] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

a[aria-label]:before,
a[aria-label]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

a[aria-label]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(aria-label);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

a[aria-label]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

a[aria-label]:hover:before,
a[aria-label]:hover:after {
  visibility: visible;
  opacity: 1;
}

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

к меню ↑

ToolTip для формы

Подсказка всплывает после того как пользователь активирует поле ввода.

HTML

<form id="demo-aria" action="/">
  <fieldset>
    <legend>Форма входа в систему</legend>
    <div>
      <label for="username">Логин:</label>
      <input type="text" id="username" aria-describedby="username-tip" required />
      <div role="tooltip" id="username-tip">Логин — это ваше имя пользователя в системе или электронный адрес</div>
    </div>
    <div>
      <label for="password">Пароль:</label>
      <input type="text" id="password" aria-describedby="password-tip" required />
      <div role="tooltip" id="password-tip">Пароль для входа был отправлен на Ваш электронный адрес</div>
   </div>
  </fieldset>
</form>

CSS

legend {
  padding: 2px 8px;
  white-space: normal;
}

fieldset > div {
  position: relative;
  height: 68px;
}

div label {
  display: inline-block;
  width: 70px;
}

input:focus + [role="tooltip"] {
  display: block;
}

[role="tooltip"] {
  background: #eee;
  padding: 2px 4px;
  position: relative;
  display: none;
  z-index: 2;
}

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