1 голос
 
1985 просмотров
3.09.2016 / 18:20  riseremi

Tooltip на чистом CSS

css html
Здравствуйте, пытаюсь сделать tooltip (всплывающее подсказка) на CSS без использования JavaScript. Я сверстал подсказку, но не могу сделать, чтобы она появлялась. Пожалуйста помагите.
Ответы
 
1 голос
 
# 4.09.2016 / 14:03  riseremi
Нашёл решение, поделюсь.

Что получится в итоге:
https://annimon.com/qa/a20/pure-css-tooltip.png

Хитрость заключается в использовании data-атрибута на родительском элементе и CSS-свойства  content  на псевдоэлементе.

Наивная разметка для элемента, к которому нужно добавить всплывающую подсказку. Текст подсказки находится в атрибуте  data-label , а класс  .tooltipped  делает всю магию:
  1. <a class="tooltipped" href="#" data-label="give up and go home"></a>

Теперь нужно сделать, чтобы подсказка показывалась при наведении. У нас есть псевдокласс  :hover , который применяется к элементу при наведении, два псевдоэлемента  :before  и  :after  и волшебное свойство  content . Соберём всё вместе:
  1. /* Базовые стили для центрирования обоих элементов по горизонтали, где :before - треугольник, :after - прямоугольник с текстом. */
  2. .tooltipped:before, .tooltipped:after {
  3.   position: absolute;
  4.   display: block;
  5.   left: 50%;
  6.   transform: translateX(-50%);
  7. }
  8.  
  9. /* Стилизуем треугольник. Обратите внимание на псевдокласс :hover – указанные стили к псевдоэлементу применятся только при наведении мыши на родительский элемент (который с классом .tooltipped). Из кастомного только первая строчка (позиционирование), остальное – код для генерации треугольника, в нашем случае вершиной вниз. */
  10. .tooltipped:hover:before {
  11.   top: -15px;
  12.   content: '';
  13.   width: 0;
  14.   height: 0;
  15.   border-style: solid;
  16.   border-width: 5px 5px 0 5px;
  17.   border-color: rgba(0,0,0,0.8) transparent transparent transparent;
  18. }
  19.  
  20. /* Прямоугольник с текстом. Здесь важно только свойство content, в значение которого мы кладём значение атрибута data-label родительского элемента. */
  21. .tooltipped:hover:after {
  22.   top: -37px;
  23.   padding: 5px 7px;
  24.   min-width: 100px;
  25.   white-space: nowrap;
  26.   background-color: rgba(0, 0, 0, .8);
  27.   border-radius: 3px;
  28.   content: attr(data-label);
  29.   color: #fff;
  30.   font-family: sans-serif;
  31.   font-size: 10px;
  32.   text-align: center;
  33. }

Вот и всё. Версии, всплывающие снизу, слева и справа можно реализовать самостоятельно.

Ссылка на готовый пример: JSBin
Ссылка на генератор CSS треугольников: CSS Triangle Generator
Изм. aNNiMON от 1.11.2017 / 11:43
pure-css-tooltip.png (12.05 кб.)
 
0 голосов
 
# 4.09.2016 / 14:02  Ксакеп
Здравствуйте, в простом случае можно попробовать использовать селектор :hover:after и свойство content: attr(title) для оформления самого тултипа.
Всего: 2

Реклама

Мы в соцсетях

tw tg yt gt