ZorNet.Ru — сайт для вебмастера » HTML и CSS » Всплывающие подсказки на CSS3 и HTML5

Всплывающие подсказки на CSS3 и HTML5

В этом материале вы узнаете, как можно быстро и качественно установить на ключевое слово подсказку, что при наведении клика она плавно покажется. Теперь вы самостоятельно сможете выставить всплывающие подсказки, которые используют CSS3 и HTML5, но главное это JavaScript не требуется устанавливать, ведь она работает на чистой стилистике. Сами по своим функциям всплывающие подсказки, это отличное решение, чтоб узнать о переходе больше, где ставится для удобства пользователя.

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

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

И нужно помнить, что подсказки стали наиболее распространенные по своему способу, это уведомить гостей или того, кто наводит на те знаки, где заключено окно с описанием.

Все проверено на работоспособность, так выглядит на светлом фоне:

Темная подсказка при наведение курсора

Приступаем к установке:

HTML

Код

<span class="kubunesd-kamlopavag" data-tip="Здесь пишем подсказку по теме">ZORNET.RU</span>

CSS

Код

span{
  margin:198px
}

.kubunesd-kamlopavag {
  cursor : help;
  position : relative;
}

.kubunesd-kamlopavag::before, .kubunesd-kamlopavag::after {
  position : absolute;
  left : 50%;
  opacity : 0;
  z-index: -100;
}

.kubunesd-kamlopavag:hover::before, .kubunesd-kamlopavag:focus::before, .kubunesd-kamlopavag:hover::after, .kubunesd-kamlopavag:focus::after {
  opacity : 1;
  z-index: 100;
}

.kubunesd-kamlopavag::before {
  border-style: solid;
  border-width: 1em .80em 0 .80em;
  border-color: #383d42 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) transparent;
  bottom: 100%;
  margin-left: -.5em;
  content: " ";
}

.kubunesd-kamlopavag::after {
  background: #404346;
  border-radius: .30em;
  bottom: 175%;
  color: white;
  width: 275px;
  padding: 1em;
  margin-left: -8.80em;
  content: attr(data-tip);
}

Ранее можно было увидеть аналогичный материал, как по стилю или формату показа, только в использование всплывающие подсказки на основе JavaScript. Но уже с поддержкой CSS3 и HTML5 во всех основных обновленных браузерах, не нужно прописывать скрипт, который бы отвечал за появление.

Здесь нужно добавить, вы один раз поставили стили, и потом если нужно в какой-то момент поставить подсказку на слово, то вам нужно только прописать класс, от которого он напитывается для своего показа.

Демонстрация

28 Февраля 2019 Загрузок: 2 Просмотров: 1399 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0