По умолчаниюСветлая версия
↑ перейти к списку статей

Делаем тултипы на CSS

Уже несколько раз меня просили сделать обычные тултипы, которые со стрелочками такие. Все бы было хорошо: состряпал блок с круголками, взял треугольники отсюда и вуаля. Однако, не все так просто. Ведь полет фантазии дизайнеров велик. То им стрелочки с наклоном, то им рамки, то тени.
Всё это оказалось абсолютно решаемым с помощью CSS, если включить немного смекалки.
От слов к делу.

Итак, делаем заготовку.
Нам понадобится один див и 1 или 2 псевдоэлемента.
div{
position:relative;
display:inline-block;
padding:10px;
min-height:30px;
min-width:100px;
font-family:'Trebuchet MS';
margin-right:30px;
text-align:left;
}
div:before, div:after{
content:'';
position:absolute;
}

Тултип с рамкой

Скругляем сам тултип и делаем рамку. Затем к нему подвешиваем псевдоэлемент со стрелкой и с помощью transform сначала поворачиваем его, а затем наклоняем. В итоге у нас получится наклоненный параллелограмм. Задаем ему рамку и через z-index:-1 прячем его «под» основной блок. Но теперь у нас рамка тултипа оказывается поверх стрелки. Для этого берем еще один псевдоэлемент и накладываем точно поверх этой рамки, задав цвет фона, такой же как у тултипа. Вот и все. Код ниже.
.t1{
border-radius:10px;
background:#efefef;
border:1px solid #777;
}

.t1:before{
bottom:-5px;
left:10px;
width:20px;
height:10px;
-webkit-transform:rotate(-30deg) skewX(-45deg);
-moz-transform:rotate(-30deg) skewX(-45deg);
-o-transform:rotate(-30deg) skewX(-45deg);
-ms-transform:rotate(-30deg) skewX(-45deg);
background:#efefef;
z-index:-1;
border:1px solid #777;
}

.t1:after{
left:13px;
bottom:-1px;
width:15px;
height:1px;
background:#efefef;
}

Простой тултип со стрелкой

Здесь все просто. Как и написал во вступлении: берем блок и навешиваем к нему треугольник через псевдоэлемент.
.t2{
background:#333;
border-radius:5px;
color:#ccc;
}

.t2:before{
left:10px;
bottom:-10px;
width:0px;
height:0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #333;
}

Тултип с тенью

Здесь почти все тоже самое, как и в первом варианте, только добавляем тень.
И z-index делаем положительным(или вообще не указываем), т.к. тень есть тень и ее не скрыть вспомогательным псевдоэлементом. Сразу отмечу, что данная конструкция подразумевает под собой резервирование в тултипе места внизу.
.t3:before{
bottom:-4px;
right:10px;
width:20px;
height:10px;
-webkit-transform:rotate(30deg) skewX(45deg);
-moz-transform:rotate(30deg) skewX(45deg);
-ms-transform:rotate(30deg) skewX(45deg);
-o-transform:rotate(30deg) skewX(45deg);
background:#efefef;
z-index:1;
box-shadow:4px 5px 5px 0px #777;
}

В примере есть тултип с градиентом, но его не буду описывать, т.к. там все делается по аналогии. Добавлена лишь «красивость», которая не является предметом моего повествования.

Полупрозрачный тултип

В свою очередь он ничем не отличается от «обычного тултипа» со стрелкой. Задаем фон через rgba и вперед. Для порядка я его тоже наклонил.
.t5:before{
left:15px;
top:-10px;
width:0px;
height:0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(51,51,51,0.5);
-webkit-transform:skewX(45deg);
-moz-transform:skewX(45deg);
-ms-transform:skewX(45deg);
-o-transform:skewX(45deg);
}

Пример находится здесь
Покопаться в коде можно здесь

Кнопки для сайта

5 комментариев: Делаем тултипы на CSS

  1. Alex говорит:

    Спасибо!

    • Aki_99 говорит:

      уголок в I.E не работает. Как ето сделать в ехплоере

      • Aki_99 говорит:

        помогите плис!

        • Alpatriott говорит:

          Вы про какой IE говорите? Пример нормально отображается в 9-й версии. В 8-й версии работает еще тултип t2.

  2. Анна говорит:

    Весьма оригинальный способ.