Создание всплывающей подсказки с использованием CSS

Опубликовано: 5 Января, 2022

Всплывающая подсказка используется для предоставления интерактивных текстовых подсказок, которые дают пользователю представление об элементе при перемещении указателя мыши. Например, на изображении ниже 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 {
                    
                                            Technical Scripter
                                            Picked
                                            CSS-Misc
                                            CSS
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИКоличество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023

                    < PROGLER >

                

                    Общее
Контакты
Политика конфиденциальности

                    Обучение
Блог

                

                © progler.ru 2025. Все права защищены.
            