В этой статье создадим всплывающие подсказки, которая будет создана на чистом CSS, что работает при клике или наведении курсора на надпись или ключевое слово, где изначально закреплена подсказка. Сама она выглядит в темном фоне, также есть вариант вывести в темно прозрачном фоне.
Это простое предложение по установке и создание материала, что вы изначально пишите подсказку и устанавливаете, там где считаете нужным. Что можно увидеть в предложениях, где идет ключевая фраза с подсказкой, где описана, ее обозначение.
HTML
Код
<span title="ZorNet - портал для вебмастера">Наведи курсор</span>
CSS
Код
span {
margin: 100px auto;
display: block;
background: #f1f1f1;
max-width: 298px;
height: 48px;
line-height: 3em;
text-align: center;
}
span:hover{
cursor: help;
}
span[title]:hover:after {
content: attr(title);
background: rgba(45, 43, 43, 0.86);
color: #dfdfe0;
border-radius: 5px;
position: relative;
top:-120px;
right:0;
width: 100%;
display: block;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 59% 85%, 49% 100%, 37% 83%, 0 84%);
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 59% 85%, 49% 100%, 37% 83%, 0 84%);
cursor:none;
}
Эта всплывающая подсказка создана на html и css, где не задействован не один скрипт.
Демонстрация
