• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать подсказку при наведение клика в CSS (Всплывающая подсказка в определенном месте на чистом CSS)
Создать подсказку при наведение клика в CSS
Kosten
Дата: Пятница, 2019-02-08, 04:05 | Сообщение 1
Администраторы
Сообщений:24253
Награды: 56


В этой статье создадим всплывающие подсказки, которая будет создана на чистом 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, где не задействован не один скрипт.

Демонстрация
Прикрепления: 8990857.png(5.3 Kb) · degun.zip(2.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать подсказку при наведение клика в CSS (Всплывающая подсказка в определенном месте на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: