Building Tooltip using CSS

02 Jan, 2019
A Tooltip is used to provide interactive textual hints that gives the user an idea about the element when mouse pointer moves over. For Example, in the below image GeeksForGeeks is a button and when user hovers over it, the additional information “A computer Science Portal” pops-up.
Positions of Tooltip: Depending on the values set to top, bottom, left and right, Tooltip can be positioned at any degree. There are mainly four position which are widely used while building Tooltips for better representation and for good user experience:
Right Tooltip: The Left and Top property of CSS are used to place the tooltip right to the hoverable text. The value of Left should be to set (100+x)% to make it appear to the right of the container element (if x=0 then tooltip will touch the hoverable text) and the value of top should be set to (0+y)% to adjust the distance from top of the container element.Below program illustrate the above approach:<!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>                    Output:
Below program illustrate the above approach:
<!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>                    
Output:
Left Tooltip: The Right and Top properties of CSS are used to place the tooltip left to the hoverable text. The value of Right should be to set (100+x)% to make it appear to the left of the container element (if x=0 then tooltip will touch the hoverable text) and the value of top should be set to (0+y)% to adjust the distance from top end of the container element.Below program illustrate the above approach:<!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>                    Output:
Below program illustrate the above approach:
<!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>                    
Output:
Top Tooltip: The Bottom and Left properties of CSS are used to place the tooltip top to the hoverable text. The value of Bottom should be to set (100+x)% to make it appear to the top of the container element (if x=0 then tooltip will touch the hoverable text) and the value of left should be set to (0+y)% to adjust the distance from left end of the container element.Below programs illustrate the above approach:<!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>                    Output:
Below programs illustrate the above approach:
<!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>                    
Output:
Bottom Tooltip: The Top and Left properties of CSS are used to place the tooltip bottom to the hoverable text. The value of Top should be to set (100+x)% to make it appear to the bottom of the container element (if x=0 then tooltip will touch the hoverable text) and the value of left should be set to (0+y)% to adjust the distance from left end of the container element.Below program illustrate the above approach:<!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>                    Output:
Below program illustrate the above approach:
<!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>                    
Output:
Bottom Arrow: Top and Left are used to place the arrow at the bottom of the tooltip. The value of Top should be to set (100+x)% to make it appear to the bottom of the tooltip (if x=0 then the arrow will touch the tooltip) and the value of left should be set to (0+y)% to adjust the distance from left end of the tooltip (if y=50 then arrow will be in the middle of tooltip).Program:<!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>                    Output:
Program:
<!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>                    
Output:
Top Arrow: Bottom and Left are used to place the arrow at the top of the tooltip. The value of Bottom should be to set (100+x)% to make it appear to the top of the tooltip (if x=0 then the arrow will touch the tooltip) and the value of left should be set to (0+y)% to adjust the distance from left end of the tooltip (if y=50 then arrow will be in the middle of tooltip).Program:<!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>                    Output:
Program:
<!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>                    
Output:
Left Arrow: Top and Right are used to place the arrow at the left of the tooltip. The value of Right should be to set (100+x)% to make it appear to the left of the tooltip (if x=0 then the arrow will touch the tooltip) and the value of top should be set to (0+y)% to adjust the distance from top end of the tooltip (if y=50 then arrow will be in the middle of tooltip).Program:<!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>                    Output:
Program:
<!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>                    
Output:
Right Arrow: Top and Left are used to place the arrow at the right of the tooltip. The value of Left should be to set (100+x)% to make it appear to the right of the tooltip (if x=0 then the arrow will touch the tooltip) and the value of top should be set to (0+y)% to adjust the distance from top end of the tooltip (if y=50 then arrow will be in the middle of tooltip).Program:<!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%;            right: 115%;        }                  .gfg_tooltip .gfg_text::after {            content: "";            position: absolute;            top: 50%;            left: 100%;            margin-top: -5px;            border-width: 5px;            border-style: solid;            border-color: transparent transparent transparent black;        }                  .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>                    Output:
Program:
<!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%;            right: 115%;        }                  .gfg_tooltip .gfg_text::after {            content: "";            position: absolute;            top: 50%;            left: 100%;            margin-top: -5px;            border-width: 5px;            border-style: solid;            border-color: transparent transparent transparent black;        }                  .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>                    
Output:
CSS-Misc
Picked
Technical Scripter 2018
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?