Open In App

How to Make a Tooltip With a Bottom Arrow ?

Last Updated : 21 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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:

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:

1

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>

Output:

2



Similar Reads

How to Make a Tooltip With an Right Arrow ?
Tooltips are used to display the additional information along with the links on the web pages. It adds enhancement and increases the overall user experience while using the application. Below are the approaches to make a tooltip with an right arrow: Table of Content Using CSS Pseudo-elementsUsing SVGUsing CSS Pseudo-elementsIn this approach, we are
3 min read
How to make a Tooltip with an Top Arrow ?
Tooltips are the user interactive element, that is used to notify the important information to the user in a creative way. We can add a top arrow to the tooltip for more interaction. These are the two different approaches through which we can make a Tooltip With a top Arrow: Table of Content Using CSS Pseudo-elementsUsing SVGUsing CSS Pseudo-elemen
3 min read
How to make a Tooltip with a Left Arrow ?
A tooltip is a small pop-up box, text, or image that appears when a user hovers over an element such as a button, link, or image. Tooltips are often used to provide additional information about the element or give the user context. We will explore how to make a tooltip with a left arrow on the Image and text. ApproachThe HTML creates a tooltip cont
3 min read
React Suite Tooltip Hide Arrow Indicator
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we’ll learn about React suite Tooltip Hide Arrow Indicator. The tooltip component allows users to
4 min read
How to Change the Tooltip Position to Top-Bottom ?
The tooltip is a hint that appears when you hover over an element in the User Interface. You can easily create a tooltip using HTML and CSS by changing the visibility property and hover selector. The tooltip can be positioned top-bottom using the CSS top and CSS bottom properties. ApproachCreate the layout of the page with appropriate class name in
2 min read
How to make Down arrow icon using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Down arrow icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.
1 min read
How to make Up arrow icon using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Up arrow icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mo
1 min read
How to make a Slider tooltip extension using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Slider tooltip extension using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. &lt;link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/j
1 min read
How to make Tooltip using Angular UI Bootstrap ?
In this article we will see how to make Dropdown using Angular UI bootstrap. Angular UI Bootstrap is an Angular JS framework created by Angular UI developers for providing better UI which can be used easily. Syntax: &lt;div uib-tooltip&gt;&lt;/div&gt; Download AngularUI from the link: https://angular-ui.github.io/bootstrap Approach: First, add Angu
2 min read
How to make a Tooltip with an Image ?
The tooltip is the styling component that provides additional information or context when hovering over an element. We will explore various examples to make a tooltip with an image including a Tooltip With an Image on Top and Bottom, a Tooltip With an Image on Left and Right, and a Tooltip With an Array of Images. ApproachThe HTML code defines two
4 min read