Open In App

Building Tooltip using CSS

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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

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

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

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:




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

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

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



Last Updated : 02 Jan, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads