В данном примере реализована отличная всплывающая подсказка (tooltip) на CSS.
Благодаря простым CSS свойствам создание всплывающего эффекта подсказки при наведении достаточно простое, но если у вас будут вопросы, задавайте их в комментариях.
ДемоHTML
<div id="i-have-a-tooltip" data-description="I'm a tooltip!"> I have a tooltip. <br>Hover over me to see it. </div>
CSS
* { margin:0; box-sizing:border-box; } body { background-color:#efefef; } #i-have-a-tooltip { width:350px; font-family:Helvetica,Arial,sans-serif; font-weight:100; font-size:20px; text-align:center; padding:50px; margin:100px auto; background:white; position:relative; border-radius:5px; box-shadow:10px 10px 0px rgba(0,0,0,.05); } #i-have-a-tooltip:before { content:attr(data-description); box-sizing:border-box; display:block; background:rgba(0,0,0,.7); color:white; padding:20px; position:absolute; left:50%; top:-30px; margin-left:-100px; width:200px; height:65px; line-height:25px; border-radius:5px; opacity:0; transition:.25s ease-in-out; } #i-have-a-tooltip:after { content:''; display:block; position:absolute; top:35px; left:50%; margin-left:-8px; height:0; width:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid rgba(0,0,0,.7); transition:.25s ease-in-out; opacity:0; } #i-have-a-tooltip:hover:before { opacity:1; top:-50px; } #i-have-a-tooltip:hover:after { opacity:1; top:15px; }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
И нахуй стиллизировать эту всю хуйню? Я, просто, хотел подсказку. Нет, въебали овердохуя огромный блок с кучей текста. Нахуя? Объясни, где была твоя логика? Короче, лишние 2 минуты времени, надеюсь сайт попадет под АГС, чтобы не обманывать обычных юзеров.
Та иди ты нахуй, уебанус. Нахуй ты написал этот овердохуя огромный коммент, проебал лишние 2 минуты которые мог потратить на полезное нихуя, надеюсь ты ебанёшься головой об своё никчёмное мнение.
А вообще, автору спасибо за полезную инфу и за стилизацию.
Олег, ты ебанутый?
Ну ка заткнулсь все!
Как убрать нафиг див и прикрутить этот тултип к картинке? пробовал не работает
Код не отображает
ухахах
Спасибо! То, что надо 🙂
Шикарный тултип! Спасибо огромное!!!
(PS — Злой посетитель — 20.04.2017 на 03:43 — полный неадекват)