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

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

Согласно w3.org

1. текст атрибута alt отображается, когда не может быть показан объект,
2. текст атрибута title отображается во всплывающей подсказке, когда курсор мышки наведён на элемент.

<тег title="всплывающая_подсказка">содержимое</тег>
Пример:	<a href="http://shpargalkablog.ru/2013/12/title.html" title="про атрибут title: содержимое в большинстве случаев не индексируется поисковыми системами">наведи на меня</a>
Результат:	наведи на меня
Пример:	<span title="внешний вид зависит от браузера, его нельзя изменить">наведи на меня</span>
Результат:	наведи на меня

Появляющаяся подсказка (сообщение) в JavaScript

Пример:	<span onclick="alert('сообщение открывается в модальном окне, вид которого нельзя изменить');">нажми на меня</span>
Результат:	нажми на меня

Своя всплывающая подсказка к тексту

Что будет работать на CSS

Желательное поведение подсказки:

1. появляться с небольшой задержкой, чтобы не мешать незаинтересованным в подсказке посетителям,
2. появляться по центру (слева/справа) наводимого элемента,
3. адаптироваться к ширине и высоте окна браузера,
4. иметь HTML-содержимое (изображение, ссылка), а не только текст,
5. подстраиваться под содержимое (или не более содержимого, или не более указанной величины, или не более окна браузера),
6. работать на сенсорных экранах (появляться и при наведении, и при нажатии),
7. индексироваться поисковыми системами.

Примеры: наведи на меня (по центру)В статье «Как заработать деньги в интернете» можно увидеть практическое использование, наведи на меня (влево) Важно: tabindex в теге нужен чтобы срабатывал :focus, наведи на меня (вправо) Ничто так не воодушевляет, как сознание своего безнадёжного положенияАльбер Камю

Пример с анимацией: наведи на меня Короткая

<style>
.tooltip { /* стиль текста, наведя или нажав на который появится пояснение */
  display: inline-block;
  position: relative;
  background: #E6E6E6; /* цвет фона */
  text-indent: 0px;
  cursor: help; /* вид курсора */
}
.tooltip > span { /* стиль появляющейся подсказки */
  position: absolute;
  bottom: 100%;
  left: -20em; /* = max-width */
  right: -20em; /* = max-width */
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;  /* ширина подсказки может быть не более содержимого */
  max-width: 20em;  /* ширина подсказки может быть не более 20em */
  max-height: 80vh; /* необязательное ограничение по высоте подсказки, 1vh — это 1% от ширины окна */
  overflow: auto;
  visibility: hidden;
  margin: 0 auto .4em; /* поднята на .4em над текстом, наведя или нажав на который появится пояснение */
  padding: .3em;
  border: solid rgb(200,200,200);
  font-size: 90%;
  background: #fff;
  line-height: normal;
  cursor: auto;
}
.tooltip.left > span { /* начинается от левого края */
  left: 0;
  right: -20em;
  margin: 0 0 .4em;
}
.tooltip.right > span { /* начинается от правого края */
  left: -20em;
  right: 0;
  margin: 0 0 .4em auto;
}
.tooltip:after { /* треугольничек под подсказкой; тут тоже везде .4em */
  content: "";
  position: absolute;
  top: -.4em;
  left: 50%;
  visibility: hidden;
  margin: 0 0 0 -.4em;
  border: .4em solid;
  border-color: rgb(200,200,200) transparent transparent transparent;
  cursor: auto;
}
.tooltip.left:after {
  left: 1em;
}
.tooltip.right:after {
  left: auto;
  right: .6em; /* 1em - .4em */
}
.tooltip:before { /* поле между текстом, наведя или нажав на который появится пояснение, и подсказкой нужно чтобы, если перевести курсор мышки на подсказку, та не исчезла; тут тоже везде .4em */
  content: "";
  position: absolute;
  top: -.4em;
  left: 0;
  right: 0;
  height: .4em;
  visibility: hidden;
}
.tooltip:hover > span,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus > span,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  transition: 0s .4s;
}
.tooltip:focus { /* убрать рамку в Хроме */
  outline: none;
}
.tooltip.anim > span,
.tooltip.anim:after { /* анимация */
  opacity: 0;
  transform: translateY(1.5em) scale(.3);
  transform-origin: center bottom;
}
.tooltip.anim:after {
  transform: translateY(.7em) scale(.3); /* 1.7 = 1.5 / (1.4*2) */
}
.tooltip.anim:hover > span,
.tooltip.anim:hover:after,
.tooltip.anim:focus > span,
.tooltip.anim:focus:after {
  opacity: 1;
  transition: .6s .4s;
  transform: translateY(0);
}
@media (max-width: 20em) { /* ширина подсказки может быть не более ширины окна браузера */
  .tooltip > span {
    max-width: 100vw; /* в 100vw входит полоса прокрутки, но на мобильных она часто отсутствует */
    box-sizing: border-box;
  }
}
</style>

<span class="tooltip" tabindex="0">наведи на меня (по центру) <span>Подсказка</span></span>
<span class="tooltip left" tabindex="0">наведи на меня (влево) <span>Подсказка</span></span>
<span class="tooltip right" tabindex="0">наведи на меня (вправо) <span>Подсказка</span></span>
<span class="tooltip anim" tabindex="0">наведи на меня (с анимацией) <span>Подсказка</span></span>

Что нельзя сделать без JavaScript

Желательное поведение:

1. находится в видимой области окна браузера.

Пример: наведи на меняДаже когда ширина подсказки меньше окна браузера, она может уходить за край видимой области, так как подсказка располагается относительно элемента, а не относительно HTML-документа

<script>
(function(){
function raz(e) {
  var t = this.getElementsByTagName('span')[0],
      em = '-20', // 20 = max-width подсказки
      tR = t.getBoundingClientRect(),
      tS = getComputedStyle(t, '').fontSize.slice(0, -2),
      d = document.documentElement.getBoundingClientRect().right - tR.right;
  if(tR.left < 0) t.style.left = parseInt(tS * em - tR.left * 2) + 'px';
  if(d < 0) t.style.right = parseInt(tS * em - d * 2) + 'px';
}
var tooltip = document.querySelectorAll('.tooltip');
for (var i = 0; i < tooltip.length; i++) {
  tooltip[i].addEventListener('click', raz, false);
  tooltip[i].addEventListener('mouseover', raz, false);
}
})()
</script>

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

появляться под курсором,