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

Динамические всплывающие подсказки в CSS

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

Безусловно есть стандартные подсказки, которые работают по такую принципу, но там просто не присутствует ссылка на снимки, а просто идет описание, что можно заметить, намного больше знаком можно разместить, а здесь объем занимает картинка, где остается под название.

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

Проверен на работоспособность на demo странице, что вы аналогично можете сделать:

Подсказка с картинкой с наведением клика

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

HTML

Код

<a href="#" class="gamucebes-kuvadamous">
 
 ZorNet.Ru - сайт вебмастера
 
 
 <img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/photo200x200.jpg" alt="">
 
 Наведи и увидишь
</a>

Все, что нам нужно сделать сейчас, это изменить существующий код CSS для поддержки динамических всплывающих подсказок, изменив код всплывающих подсказок CSS следующим образом.

CSS

Код

.gamucebes-kuvadamous:hover,
[data-gamucebes-kuvadamous-bottom]:hover,
[data-gamucebes-kuvadamous-left]:hover,
[data-gamucebes-kuvadamous-right]:hover,
[data-gamucebes-kuvadamous]:hover {
  position: relative;
}
[data-gamucebes-kuvadamous-bottom]:hover::after,
[data-gamucebes-kuvadamous-left]:hover::after,
[data-gamucebes-kuvadamous-right]:hover::after,
[data-gamucebes-kuvadamous]:hover::after {
  all: initial;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 9px solid rgba(0, 0, 0, 0);
  border-right: 9px solid rgba(0, 0, 0, 0)
  border-top: 9px solid #212020;
  position: absolute;
  bottom: 100%;
  content: '';
  left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 5px;
}
[data-gamucebes-kuvadamous-right]:hover::after {
  margin-bottom: 0;
  bottom: auto;
  transform: rotate(90deg) translate(0, -50%);
  left: 100%;
  top: 50%;
  margin-left: -5px;
  margin-top: -5px;
}

[data-gamucebes-kuvadamous-left]:hover::after {
  margin-bottom: 0;
  bottom: auto;
  transform: rotate(-90deg) translate(0, -50%);
  left: auto;
  right: 100%;
  top: 50%;
  margin-right: -5px;
  margin-top: -5px;
}
[data-gamucebes-kuvadamous-bottom]:hover::after {
  margin-bottom: 0;
  bottom: auto;
  transform: rotate(180deg) translate(-50%, 0);
  top: 100%;
  margin-left: -20px;
  margin-top: 5px;
}

.gamucebes-kuvadamous:hover .cangavcen-kompetasud-bottom, .gamucebes-kuvadamous:hover .cangavcen-kompetasud-left, .gamucebes-kuvadamous:hover .cangavcen-kompetasud-right, .gamucebes-kuvadamous:hover .cangavcen-kompetasud, [data-gamucebes-kuvadamous-bottom]:hover::before, [data-gamucebes-kuvadamous-left]:hover::before, [data-gamucebes-kuvadamous-right]:hover::before, [data-gamucebes-kuvadamous]:hover::before {
  all: initial;
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
  border-radius: 5px;
  padding: 8px;
  background-color: #272525;
  content: attr(data-gamucebes-kuvadamous);
  color: #ece9e9;
  position: absolute;
  bottom: 100%;
  width: 100px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 15px;
  text-align: center;
  font-size: 13px;
}
.gamucebes-kuvadamous:hover .cangavcen-kompetasud-right,
[data-gamucebes-kuvadamous-right]:hover::before {
  margin-bottom: 0;
  bottom: auto;
  transform: translate(0, -50%);
  left: 100%;
  top: 50%;
  content: attr(data-gamucebes-kuvadamous-right);
  margin-left: 15px;
}
.gamucebes-kuvadamous:hover .cangavcen-kompetasud-left,
[data-gamucebes-kuvadamous-left]:hover::before {
  margin-bottom: 0;
  bottom: auto;
  transform: translate(0, -50%);
  left: auto;
  right: 100%;
  top: 50%;
  content: attr(data-gamucebes-kuvadamous-left);
  margin-right: 15px;
}
.gamucebes-kuvadamous:hover .cangavcen-kompetasud-bottom,
[data-gamucebes-kuvadamous-bottom]:hover::before {
  margin-bottom: 0;
  bottom: auto;
  top: 100%;
  content: attr(data-gamucebes-kuvadamous-bottom);
  margin-top: 15px;
}
.gamucebes-kuvadamous .cangavcen-kompetasud-bottom,
.gamucebes-kuvadamous .cangavcen-kompetasud-left,
.gamucebes-kuvadamous .cangavcen-kompetasud-right,
.gamucebes-kuvadamous .cangavcen-kompetasud {
  display: none;
  width: auto !important;
}

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

Где аналогично идут со статическим контентом, который не с чем не связан, где можете добавить селектор CSS : active в вашем коде, который будет отображать всплывающую подсказку, когда пользователь прикасается к элементу или касается его, это активирует элемент, где таким образом активирует селектор CSS.

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

01 Марта 2019 Просмотров: 1201 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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