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

Question

[Алексей Смирнов]

Здравствуйте.

На википедии есть вот такая статья:
ru.wikipedia.org/wiki/Носовая_слизь

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

**************************************************************************************************************

**************************************************************************************************************

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

P.S. Если можно реализовать только при помощи "HTML + CSS" или "HTML + CSS + JS" (то есть без JQ), то это даже лучше.

P.P.S. Я искал в интернете готовые реализации такого всплывающего окна по запросу "Pop Up window" (с добавлениями слов CSS, HTML, Java Script, Jquery), но не нашел.
Может где-то уже есть в интернете готовый код такого всплывающего окна.

Answer 1

[Александр]

Самое простое:
codepen.io/palehin/pen/jVajmX

Comments

[Алексей Смирнов]

Спасибо!
Я в ваш вариант ещё добавил анимацию и задержку анимации:
https://jsfiddle.net/ERAFY/vm0m0saf/1/