Всплывающая подсказка в Elementor

Привет, уважаемые посетители нашего блога! В этой статье мы покажем, как делается красивая всплывающая подсказка в Elementor, или по-другому, tooltip (наведите на слово tooltip).

В целом, можно использовать стандартный tooltip, который создается добавлением к элементу атрибута title (как добавить атрибут в Elementor читайте здесь), но он не очень привлекательно выглядит.

Мы просмотрели очень много вариантов добавления всплывающих подсказок на сайт при помощи css и js, и пришли к выводу, что проще всего добавить tooltip при помощи css. Использовать для этого JavaScript тоже можно, но так как элементор создает свою структуру страницы, это сложнее.

Tooltip в Elementor

Мы создадим всплывающую подсказку без плагинов при помощи css. Сделаем всплывающую подсказку как для всего блока, для иконки (изображения) так и для отдельной фразы в тексте.

Всплывающая подсказка для секции

Итак, создадим для примера секцию с любым содержимым (у нас это текстовый виджет).

Для работы тултипа на всей странице, пропишем нужные css-стили.

Для этого зайдем в настройки шаблона и пропишем следующие css-стили в разделе “Пользовательские стили” и вставим следующий код:

/* ALL TOOLTIP STYLES */
.my-tooltip[tooltip] {
  position: relative; 
}

.my-tooltip[tooltip]::before,
.my-tooltip[tooltip]::after {
  text-transform: none;
  font-size: .9em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
.my-tooltip[tooltip]::before {
  content: "";
  border: 5px solid transparent;
  z-index: 1001;
}
.my-tooltip[tooltip]::after {
  content: attr(tooltip);
  font-family: Helvetica, sans-serif;
  text-align: center;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
}

.my-tooltip[tooltip]:hover::before,
.my-tooltip[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
.my-tooltip[tooltip='']::before,
.my-tooltip[tooltip='']::after {
  display: none !important;
}

/* TOOLTIP: UP */
.my-tooltip[tooltip]:not([flow])::before,
.my-tooltip[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
.my-tooltip[tooltip]:not([flow])::after,
.my-tooltip[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
.my-tooltip[tooltip]:not([flow])::before,
.my-tooltip[tooltip]:not([flow])::after,
.my-tooltip[tooltip][flow^="up"]::before,
.my-tooltip[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* TOOLTIP: DOWN */
.my-tooltip[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
.my-tooltip[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
.my-tooltip[tooltip][flow^="down"]::before,
.my-tooltip[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* TOOLTIP: LEFT */
.my-tooltip[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
.my-tooltip[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* TOOLTIP: RIGHT */
.my-tooltip[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
.my-tooltip[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

.my-tooltip[tooltip]:not([flow]):hover::before,
.my-tooltip[tooltip]:not([flow]):hover::after,
.my-tooltip[tooltip][flow^="up"]:hover::before,
.my-tooltip[tooltip][flow^="up"]:hover::after,
.my-tooltip[tooltip][flow^="down"]:hover::before,
.my-tooltip[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

.my-tooltip[tooltip][flow^="left"]:hover::before,
.my-tooltip[tooltip][flow^="left"]:hover::after,
.my-tooltip[tooltip][flow^="right"]:hover::before,
.my-tooltip[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

Не будем подробно описывать значение всех стилей, а обратим внимание лишь на значение основных свойств.

Мы видим, что для работы тултипа элемент должен отвечать следующим требованиям:

• ему должен быть присвоен класс my-tooltip;
• должен содержать атрибут tooltip, значение которого и будет содержать всплывающая подсказка;
• должен содержать атрибут flow, значением которого является место появления подсказки: up (вверх), down (внизу), left (слева), right (справа).

Давайте сделаем всплывающую подсказку для нашего текста. Для этого пропишем класс и добавим атрибуты

В атрибуте tooltip мы прописали текст “Наша всплывающая подсказка”, который будет отображаться в нашей всплывающей подсказке, а в атрибуте flow указали значение UP, чтобы tooltip появлялся сверху.

Проверяем результат и видим, что все работает

Всплывающая подсказка для иконки или изображения

Аналогичным образом делаем tooltip для иконки или изображения

Присваиваем им необходимые класс и атрибуты.

Всплывающая подсказка для фразы в текстовом виджете

Добавить tooltip для части текста немного посложнее.

Давайте возьмем наш первый пример с текстом, и добавим tooltip для его фразы (в нашем случае возьмем фразу “Грегор Замза”)

Для этого зайдем в текстовый виджет и перейдем из визуального редактора в текстовый.

Чтобы добавить всплывающую подсказку в текст, нам нужно часть текста, при наведении на который курсором мышки будет показан tooltip с текстом, обернуть в тег span с классом my-tooltip и атрибутами tooltip и flow:

<span class="my-tooltip" tooltip="Текст всплывающей подсказки" flow="up"> Грегор Замза </span>

В результате при наведении на Грегор Замза будет появляться tooltip.

Оформляем tooltip

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

Добавим к нашему коду в самом начале статьи еще немного css:

selector .my-tooltip {
    background-color: #eee;
     box-shadow: 0 0 5px rgba(0,0,0,0.5);
     padding: 3px;
     border-radius: 5px;
}

Смотрим результат:

Вы можете редактировать внешний вид tooltip по своему усмотрению, нужны минимальные знания css.

Отключаем стандартный tooltip в Elementor

Чтобы полностью отключить стандартную всплывающую подсказку, то есть не показывать значение атрибута title, пропишите в поле собственных css-стилей:

selector [title] { pointer-events: none; }

Отключаем стандартный tooltip для изображений в Elementor

Для отключения всплывающих подсказок только для изображений, пропишите код:

selector img[title] { pointer-events: none; }

Страница с примерами

На этом у меня все! Спасибо за внимание! Надеюсь, моя статья помогла Вам. Если так, то не скупитесь на лайки. Удачи)