:hover
В очередной раз просматривая плагины для реализации всплывающих подсказок, наткнулся на замечательный пост.
Ничего сверхсложного и сверхсекретного в реализации не было, но она мне понравилась своей простотой и отсутствием javascript'a.
Обмозговав возможное применение, решил что на самой подсказке тоже могут быть подсказки, на подсказках второго уровня, могут быть подсказки 3его уровня и т.д. Можно сделать интерактивную блок-схему!
![image](https://habrastorage.org/getpro/habr/post_images/f50/fab/ae3/f50fabae30f1ab2810c7d3366f3075b5.png)
Реализация
Взяв за основу блок-схему для универсального решения проблем (прошу прощения, где попалась мне эта картинка, я уже не помню):
![image](https://habrastorage.org/getpro/habr/post_images/05c/a7b/109/05ca7b109f2309d533bd96a2cbe98a22.jpg)
решил сделать ее интерактивной. Результат труда можно посмотреть по этой ссылке.
Скриншот для тех, кому лень кликать:
![image](https://habrastorage.org/getpro/habr/post_images/5d4/611/461/5d4611461fb9dafd26e460fccca106be.png)
Теперь немного о коде
HTML
![image](https://habrastorage.org/getpro/habr/post_images/04c/1a5/976/04c1a5976f432ca7bfdc2c80d7a9bf7c.png)
Структурная единица представляет собою span с текстом внутри. Внутри один или два блока a после каждого из которых новый span, и, следовательно, новая структурная единица.
CSS
Собственно сам двигатель:
![image](https://habrastorage.org/getpro/habr/post_images/b73/211/3e5/b732113e5e31d78654b3e3e80b4df713.png)
В зависимости от положения курсора, тот или иной блок встают под блоком, над которым находится курсор.
Заключение
Я не претендую на то, что кто-то будет использовать мои наработки в своем проекте, но думаю что сие небольшое творение натолкнет кого-то на еще более экстравагантные идеи.
Еще раз моя блок-схема
О всплывающих подсказках на CSS