Создание всплывающей подсказки с использованием CSS
Всплывающая подсказка используется для предоставления интерактивных текстовых подсказок, которые дают пользователю представление об элементе при перемещении указателя мыши. Например, на изображении ниже GeeksForGeeks - это кнопка, и когда пользователь наводит на нее курсор, появляется дополнительная информация «Портал компьютерных наук».
Положение всплывающей подсказки: в зависимости от установленных значений вверху, внизу, влево и вправо всплывающую подсказку можно расположить под любым углом. В основном четыре позиции, которые широко используются при создании всплывающих подсказок для лучшего представления и удобного взаимодействия с пользователем:
- Правая всплывающая подсказка: свойства Left и Top в CSS используются для размещения всплывающей подсказки справа от зависшего текста. Значение Left должно быть установлено (100 + x)%, чтобы он отображался справа от элемента контейнера (если x = 0, всплывающая подсказка коснется зависшего текста), а значение top должно быть установлено на (0+ y)%, чтобы отрегулировать расстояние от верха элемента контейнера.
Программа ниже иллюстрирует вышеуказанный подход:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>tooltip in CSS</
title
>
<
style
>
.gfg_tooltip {
position: relative;
display: inline-block;
background-color: green;
color: black;
padding: 15px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.gfg_tooltip .gfg_text {
visibility: hidden;
min-width:100px;
background-color: green;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 25%;
left: 105%;
}
.gfg_tooltip:hover .gfg_text {
visibility: visible;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
button
class
=
"gfg_tooltip"
>
GeeksforGeeks
<
span
class
=
"gfg_text"
>
A Computer science portal
</
span
>
</
button
>
</
body
>
</
html
>
Выход:
- Левая подсказка: свойства Right и Top в CSS используются для размещения всплывающей подсказки слева от зависшего текста. Значение Right должно быть установлено (100 + x)%, чтобы он отображался слева от элемента контейнера (если x = 0, всплывающая подсказка коснется зависшего текста), а значение top должно быть установлено на (0+ y)%, чтобы отрегулировать расстояние от верхнего конца элемента контейнера.
Программа ниже иллюстрирует вышеуказанный подход:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>tooltip in CSS</
title
>
<
style
>
.gfg_tooltip {
position: relative;
display: inline-block;
background-color: green;
color: black;
padding: 15px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.gfg_tooltip .gfg_text {
visibility: hidden;
width: 120px;
background-color: green;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 25%;
right: 105%;
}
.gfg_tooltip:hover .gfg_text {
visibility: visible;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
button
class
=
"gfg_tooltip"
>
GeeksforGeeks
<
span
class
=
"gfg_text"
>
A Computer science portal
</
span
>
</
button
>
</
body
>
</
html
>
Выход:
- Верхняя всплывающая подсказка: свойства Bottom и Left в CSS используются для размещения всплывающей подсказки вверху над перемещаемым текстом. Значение Bottom должно быть установлено (100 + x)%, чтобы он отображался в верхней части элемента контейнера (если x = 0, всплывающая подсказка коснется зависшего текста), а значение left должно быть установлено на (0+ y)%, чтобы отрегулировать расстояние от левого конца элемента контейнера.
Нижеприведенные программы иллюстрируют вышеуказанный подход:
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.gfg_tooltip {
position: relative;
display: inline-block;
background-color: green;
color: black;
padding: 15px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.gfg_tooltip .gfg_text {
visibility: hidden;
width: 120px;
background-color: green;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 105%;
left: 10%;
}
.gfg_tooltip:hover .gfg_text {
visibility: visible;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
button
class
=
"gfg_tooltip"
>GeeksforGeeks
<
span
class
=
"gfg_text"
>
A Computer science portal
</
span
>
</
button
>
</
body
>
</
html
>
Выход :
- Нижняя всплывающая подсказка : свойства CSS «Верх» и « Слева» используются для размещения всплывающей подсказки внизу всплывающего текста. Значение Top должно быть установлено (100 + x)%, чтобы он отображался в нижней части элемента контейнера (если x = 0, всплывающая подсказка коснется зависшего текста), а значение left должно быть установлено на (0+ y)%, чтобы отрегулировать расстояние от левого конца элемента контейнера.
Программа ниже иллюстрирует вышеуказанный подход:
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.gfg_tooltip {
position: relative;
display: inline-block;
background-color: green;
color: black;
padding: 15px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.gfg_tooltip .gfg_text {
visibility: hidden;
width: 120px;
background-color: green;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 105%;
left: 10%;
}
.gfg_tooltip:hover .gfg_text {
visibility: visible;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
button
class
=
"gfg_tooltip"
>GeeksforGeeks
<
span
class
=
"gfg_text"
>
A Computer science portal
</
span
>
</
button
>
</
body
>
</
html
>
Выход :
Стрелки всплывающей подсказки
В приведенных выше четырех примерах сгенерированная всплывающая подсказка не указывает стрелкой, поэтому, чтобы всплывающая подсказка выглядела как речевой пузырь, добавьте «пустой» контент после всплывающей подсказки с псевдоэлементом class :: after вместе со свойством content. Как и раньше, здесь также в зависимости от значений top, bottom, left и right стрелку можно создать так, чтобы она отображалась на определенной стороне всплывающей подсказки.
- Bottom Arrow : Top и Left используются для размещения стрелки внизу всплывающей подсказки. Значение Top должно быть установлено (100 + x)%, чтобы оно отображалось в нижней части всплывающей подсказки (если x = 0, то стрелка коснется всплывающей подсказки), а значение left должно быть установлено на (0 + y )%, чтобы отрегулировать расстояние от левого края всплывающей подсказки (если y = 50, стрелка будет в середине всплывающей подсказки).
Программа :
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.gfg_tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
background-color: green;
color: black;
padding: 15px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.gfg_tooltip .gfg_text {
visibility: hidden;
width: 120px;
background-color: green;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 115%;
left: 50%;
margin-left: -60px;
}
.gfg_tooltip .gfg_text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent
transparent;
}
.gfg_tooltip:hover .gfg_text {
visibility: visible;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
br
><
br
>
<
button
class
=
"gfg_tooltip"
>GeeksforGeeks
<
span
class
=
"gfg_text"
>
A Computer science portal
</
span
>
</
button
>
</
body
>
</
html
>
Выход :
- Стрелка вверху: внизу и влево используются для размещения стрелки вверху всплывающей подсказки. Значение Bottom должно быть установлено (100 + x)%, чтобы оно отображалось в верхней части всплывающей подсказки (если x = 0, то стрелка коснется всплывающей подсказки), а значение left должно быть установлено на (0 + y )%, чтобы отрегулировать расстояние от левого края всплывающей подсказки (если y = 50, стрелка будет в середине всплывающей подсказки).
Программа :
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.gfg_tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
background-color: green;
color: black;
padding: 15px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.gfg_tooltip .gfg_text {
visibility: hidden;
width: 120px;
background-color: green;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 115%;
left: 50%;
margin-left: -60px;
}
.gfg_tooltip .gfg_text::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black
transparent;
}
.gfg_tooltip:hover .gfg_text {
visibility: visible;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
br
><
br
>
<
button
class
=
"gfg_tooltip"
>GeeksforGeeks
<
span
class
=
"gfg_text"
>
A Computer science portal
</
span
>
</
button
>
</
body
>
</
html
>
Выход :
- Стрелка влево : вверх и вправо используются для размещения стрелки слева от всплывающей подсказки. Значение Right должно быть установлено (100 + x)%, чтобы оно отображалось слева от всплывающей подсказки (если x = 0, то стрелка коснется всплывающей подсказки), а значение top должно быть установлено на (0 + y )%, чтобы отрегулировать расстояние от верхнего края всплывающей подсказки (если y = 50, стрелка будет в середине всплывающей подсказки).
Программа :
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.gfg_tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
background-color: green;
color: black;
padding: 15px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.gfg_tooltip .gfg_text {
visibility: hidden;
width: 120px;
background-color: green;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 5%;
left: 115%;
}
.gfg_tooltip .gfg_text::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent
transparent;
}
.gfg_tooltip:hover .gfg_text {
visibility: visible;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
br
><
br
>
<
button
class
=
"gfg_tooltip"
>GeeksforGeeks
<
span
class
=
"gfg_text"
>
A Computer science portal
</
span
>
</
button
>
</
body
>
</
html
>
Выход :
- Стрелка вправо : вверх и влево используются для размещения стрелки справа от всплывающей подсказки. Значение Left должно быть установлено (100 + x)%, чтобы оно отображалось справа от всплывающей подсказки (если x = 0, то стрелка коснется всплывающей подсказки), а значение top должно быть установлено на (0 + y )%, чтобы отрегулировать расстояние от верхнего края всплывающей подсказки (если y = 50, стрелка будет в середине всплывающей подсказки).
Программа :
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.gfg_tooltip {
РЕКОМЕНДУЕМЫЕ СТАТЬИ