Содержание
Задача. Необходимо установить всплывающие подсказки для текста или 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
27
28
|
Атрибут data-title = "Этот текст указан в заголовке данных">data-title определяет текст всплывающей подсказки. А сама подсказка оформляется через псевдоэлемент ":before" в CSS.
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;
}
|
Смысл Кода №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
39
40
|
Наши услуги:
/* Задаем общий стиль для элементов с подсказкой*/
#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";
}
|
Услуга один
Услуга два
Услуга три
Плагины Всплывающих подсказок для WordPress
В репозитории WP есть много различных плагинов для всплывающих подсказок. В основном у них ограниченный функционал, они добавляют подсказки через шорткод в редакторе текста или при добавлении пользовательского атрибута в html нужного элемента.
WordPress Tooltips (Tomas) — бесплатный плагин подсказок. Также есть возможность загрузить библиотеку ключевых слов, которые будут автоматически форматироваться как с всплывающей подсказкой. Так можно настроить, чтобы подтягивались слова, подсказки которых будут заполняться из Википедии.
WordPress Tooltips Ultimate & Image Hotspot (codemine) — премиум плагин подсказок для WordPress. У него больше возможностей. Можно добавлять подсказку и в ее настройке указывать селектор, к которому она будет привязываться. Т.е. если нет возможности самому отредактировать какой-то элемент и у него есть уникальный id, или другая возможность, которая позволит сослаться на него, то можно подцепить всплывающую подсказку. Также, в подсказки можно добавлять изображения, содавать различные группы стилей и др.