Домой / Рецепты CSS / Всплывающая подсказка (tooltip) на CSS
Всплывающая подсказка (tooltip) на CSS

Всплывающая подсказка (tooltip) на CSS

В данном примере реализована отличная всплывающая подсказка (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;
}
В данном примере реализована отличная всплывающая подсказка (tooltip) на CSS. Благодаря простым CSS свойствам создание всплывающего эффекта подсказки при наведении достаточно простое, но если у вас будут вопросы, задавайте их в комментариях. HTML 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&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.02 ( 18 голосов )
100

10 комментариев

  1. Аватар
    Злой посетитель

    И нахуй стиллизировать эту всю хуйню? Я, просто, хотел подсказку. Нет, въебали овердохуя огромный блок с кучей текста. Нахуя? Объясни, где была твоя логика? Короче, лишние 2 минуты времени, надеюсь сайт попадет под АГС, чтобы не обманывать обычных юзеров.

    • Аватар

      Та иди ты нахуй, уебанус. Нахуй ты написал этот овердохуя огромный коммент, проебал лишние 2 минуты которые мог потратить на полезное нихуя, надеюсь ты ебанёшься головой об своё никчёмное мнение.

      А вообще, автору спасибо за полезную инфу и за стилизацию.

    • Аватар

      Олег, ты ебанутый?

  2. Аватар

    Ну ка заткнулсь все!

  3. Аватар

    Как убрать нафиг див и прикрутить этот тултип к картинке? пробовал не работает

  4. Аватар

    Код не отображает

  5. Аватар

    Спасибо! То, что надо 🙂

  6. Аватар

    Шикарный тултип! Спасибо огромное!!!

    (PS — Злой посетитель — 20.04.2017 на 03:43 — полный неадекват)

Оставить комментарий

Ваш email не будет опубликован.

*