How to Make a Tooltip With a Bottom Arrow ?

Last Updated : 21 Mar, 2024

Tooltips are the UI pop-up boxes or text that appear when a user hovers over an element such as a button, link, or image. We can create customized Tooltip having direction arrows such as Bottom Arrow.

Below are the approaches to make a tooltip with a bottom arrow:

Table of Content

Using CSS Pseudo-elements
Using SVG

Using CSS Pseudo-elements

In this approach, we are using CSS pseudo-elements to create a tooltip with a bottom arrow. By positioning an after pseudo-element on the tooltip container, the bottom arrow is created which then styles using styling properties.

Syntax:

selector::pseudo-element {
     property: value;
}

Example: The below example uses CSS Pseudo-elements to make a Tooltip With a bottom Arrow

HTML

<!DOCTYPE html>
<head>
    <title>Example 1</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            flex-direction: column;
        }
        h1 {
            color: green;
        }
        h3 {
            margin-bottom: 50px;
        }
        .ttip {
            position: relative;
            display: inline-block;
        }
        .ttip .ttiptext {
            visibility: hidden;
            width: 120px;
            background-color: rgb(248, 215, 105);
            color: rgb(0, 0, 0);
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .ttip .ttiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -15px;
            border-width: 15px;
            border-style: solid;
            border-color: transparent transparent rgb(79, 3, 255) transparent;
            transform: rotate(180deg); 
        }
        .ttip:hover .ttiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using CSS Pseudo-elements</h3>
    <div class="ttip">Hover over me
        <span class="ttiptext">GFG is Awesome</span>
    </div>
</body>

</html>

Output:

Using SVG

In this approach, we are using SVG to create a tooltip with a bottom arrow. The SVG polygon is positioned below the tooltip text, forming an arrow pointing downwards when hovered over.

Syntax:

<svg width="width" height="height">
    <!-- bottom shape -->
</svg>

Example: The below example uses SVG to make a Tooltip With a bottom Arrow

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Example 2</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        h1 {
            color: green;
            text-align: center;
        }
        h3 {
            text-align: center;
            margin-bottom: 50px;
        }
        .ttip {
            position: relative;
            display: inline-block;
            
        }
        .ttip .ttiptext {
            visibility: hidden;
             margin-bottom: 50px;
            width: 140px;
            background-color: #45ecd6;
            color: rgb(0, 0, 0);
            text-align: center;
            border-radius: 6px;
            padding: 6px;
            position: absolute;
            z-index: 1;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s, visibility 0s linear 0.3s;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
        .ttip .ttiptext svg {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
        }
        .ttip .ttiptext svg polygon {
            fill: #ff00b3;
        }
        .ttip:hover .ttiptext {
            visibility: visible;
            opacity: 1;
            transition: opacity 0.3s, visibility 0s linear 0s;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using SVG</h3>
    <div class="ttip">
        Hover over me
        <div class="ttiptext">
            GFG is Awesome
            <svg height="15" width="30">
                <polygon points="0,0 15,15 30,0" />
            </svg>
        </div>
    </div>
</body>
  
</html>