Содержание
Задача. Необходимо установить всплывающие подсказки для текста или html-элементов.
Решение. Всплывающие подсказки можно сделать несколькими способами: только на HTML и CSS, или же дополнительно использовать JavaScript.
Вариант 1: Всплывающая подсказка на CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<p>Атрибут <span data-title = "Этот текст указан в заголовке данных">data-title</span> определяет текст всплывающей подсказки. А сама подсказка оформляется через псевдоэлемент ":before" в CSS. </p> <style> span[data-title] { position: relative; display: inline-block; color: red; cursor: pointer; border-bottom: 1px dashed #000; } span[data-title]:hover:before { content: attr(data-title); position: absolute; width: 100px; color: #fff; background: #000; padding: 5px; border-radius: 4px; bottom: 25px; left: 50px; } <style> |
Смысл Кода №1 таков, что назначаем нужному элементу универсальный атрибут data-
со значением, которое будет в итоге контентом всплывающей подсказки. После чего в стилях прописываем данные для появления псевдоэлемента ::before нашего элемента. В свойстве content
через функцию attr()
добавляем вывод значения установленного ранее атрибута data-
.
Вариант 2: Всплывающая подсказка на CSS без data-
Может быть такая ситуация что нет возможности прописать data-атрибуты нужным эелементам. В таком случае можно сделать подсказки как в первом варианте, только в свойство content вписывать непосредственно необходимую подсказку. Тут необходимо чтобы была возможность как-то определить нужный элемент. Возможно у него будет id или какие-то другие атрибуты.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<p>Наши услуги:</p> <ul> <li id="usluga-1">Услуга один</li> <li id="usluga-2">Услуга два</li> <li id="usluga-3">Услуга три</li> </ul> <style> /* Задаем общий стиль для элементов с подсказкой*/ #usluga-1, #usluga-3 { position: relative; color: red; cursor: pointer; text-decoration: underline dashed 1px; } /* Задаем общий стиль всплывающей подсказки для нужных элементов*/ #usluga-1:hover:before, #usluga-3:hover:before { position: absolute; width: 100px; color: #fff; background: #000; padding: 5px; border-radius: 4px; bottom: 25px; left: 50px; } /* Добавляем текст в конкретной всплывающей подсказке */ #usluga-1:hover:before { content: "Текст для услуги 1"; } #usluga-3:hover:before { content: "Текст для услуги 3"; } </style> |
Услуга один
Услуга два
Услуга три
Вариант 3: Всплывающая подсказка на CSS со ссылкой внутри
Это всплывающая подсказка со ссылкой wpcraft.topподсказка на чистом CSS со ссылкой внутри.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<p>Это всплывающая <span class="tooltip_2"><span class="tooltip_link">подсказка со ссылкой <a href="https://wpcraft.top" target="_blank" rel="noopener">wpcraft.top</a></span>подсказка</span> на чистом CSS со ссылкой внутри.</p> <style> /* 3 */ span.tooltip_2 { position: relative; display: inline-block; color: red; cursor: pointer; border-bottom: 1px dashed #000; } .tooltip_link { display: none; } span.tooltip_2:hover .tooltip_link { display: block; position: absolute; width: 270px; color: #fff; background: #000; padding: 8px 10px; border-radius: 4px; bottom: 25px; left: 0; } </style> |
Плагины Всплывающих подсказок для WordPress
В репозитории WP есть много различных плагинов для всплывающих подсказок. В основном у них ограниченный функционал, они добавляют подсказки через шорткод в редакторе текста или при добавлении пользовательского атрибута в html нужного элемента.
WordPress Tooltips (Tomas) — бесплатный плагин подсказок. Также есть возможность загрузить библиотеку ключевых слов, которые будут автоматически форматироваться как с всплывающей подсказкой. Так можно настроить, чтобы подтягивались слова, подсказки которых будут заполняться из Википедии.
WordPress Tooltips Ultimate & Image Hotspot (codemine) — премиум плагин подсказок для WordPress. У него больше возможностей. Можно добавлять подсказку и в ее настройке указывать селектор, к которому она будет привязываться. Т.е. если нет возможности самому отредактировать какой-то элемент и у него есть уникальный id, или другая возможность, которая позволит сослаться на него, то можно подцепить всплывающую подсказку. Также, в подсказки можно добавлять изображения, содавать различные группы стилей и др.
Добрый день! Подскажите, а возможно разместить в ссылку на сайт в тексте для услуги?
#usluga-1:hover:before {
content: «Текст для услуги 1»;
Приветствую. Через свойство content псевдоэлемента :before не получится. добавил 3-й способ в статье, там можно ссылку добавить. Возможно вам подойдет.