Building Tooltip using CSS

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:

Tooltip Arrows


In the above four examples the tooltip generated does not point using arrow, so to make the tooltip look like an speech bubble, add “empty” content after tooltip, with the pseudo element class ::after together with the content property. Like earlier, here also depending on the values of top, bottom, left and right the arrow can be created such that it appears on specific side of the tooltip.

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.