Update appNew update is available. Click here to update.
home
Coding Ninjas Studio
expand-more
Library
expand-more
expand-more
Intermediate
expand-more
How to create HTML Tooltip?
Last Updated: Sep 28, 2023
Easy

How to create HTML Tooltip?

Author Gaurav Singh
0 upvote

Introduction

Hi Ninjas, in this blog we will discuss the HTML Tooltip and why it's essential to have one on your website. We will also see how to add the HTML tooltip through examples using real-life code. Any information generated when one touches the content on an HTML page by hovering the mouse over it is simply done using the HTML Tooltip.

HTML Tooltip

So this lets us understand the purpose of the HTML tooltip, different ways of adding HTML tooltips, creating basic tooltips with CSS, and then finally moving on to the advanced courses of adding HTML tooltips using JavaScript.

What is a tooltip in HTML?

A tooltip is a user interface component having text that is displayed when a user hovers their cursor over an element. Usually, a tooltip contains text that provides additional context, description, or instructions that users may want to know. Tooltips are great for bits of text that can be hidden to save space on the page but are accessible easily when users require them. 

Purpose of HTML Tooltip

Tooltip is one of the functionalities that can be added to show extra information when the mouse hovers over a particular HTML element. The data is displayed whenever the mouse is poised to lead to specific information related to the word.

It helps users have more interaction with the website. It is done by adding an inline element like span or class tooltip text. Thus, it gives users more ways to interact with the website. And it provides optional information, displayed only when the mouse hovers over that content.

How to Create an HTML Tooltip?

For creating an HTML Tooltip follow the mentioned steps below:

  • Step 1: To make a simple tooltip, create an HTML ‘div’ with class ‘hover-text’ for triggering the tooltip when hovered over it.
  • Step 2: Next, we have to create a span element with the class ‘tooltip-text’ for the tooltip. Then place this element inside the parent 'div' with the ‘hover-text’ class.
  • Step 3: At last, we have to include CSS to add behavior to the tooltip.
    1. For hiding the “tooltip-text” class, the visibility 
          is set to hidden.
    2. The z-index is set as 1 for placing it above any other page content.
    3. The hover pseudo-class of class hover-text shows the tooltip text when the mouse hovers over it. 

Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML Tooltip Example</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <!-- Add a tooltip to an element using the "title" attribute -->
   <div class="hover-text">Top
       <span class="tooltip-text top">Tooltip Text</span>
     </div>
     <div class="hover-text">Bottom
       <span class="tooltip-text bottom">Tooltip Text</span>
     </div>
     <div class="hover-text">Left
       <span class="tooltip-text left">Tooltip Text</span>
     </div>
     <div class="hover-text">Right
       <span class="tooltip-text right">Tooltip Text</span>
     </div>
     
</body>
</html>

CSS

  • CSS

CSS

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width: 100px;
  color: white;
  background-color: #192733;
  padding: 5px;
}
.hover-text:hover .tooltip-text {
  visibility: visible;
}

.top {
  top: -40px;
  left: -50%;
}
.bottom {
  top: 25px;
  left: -50%;
}

.left {
  top: -8px;
  right: 120%;

}

.right {
  top: -8px;
  left: 120%;
}

.hover-text {
  position: relative;

  display: inline-block;
  margin: 40px;
  text-align: center;
}

Output

output1
output2
output3
output4

How to Create a Tooltip with an Arrow

Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <title>Centered Tooltip with Arrow</title>
</head>
<body>
   <div class="centered-container">
       Hover over me
       <div class="tooltip-container">
           <div class="tooltip-text">This is a tooltip</div>
       </div>
   </div>
</body>
</html>

CSS

  • CSS

CSS

body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 margin: 0;
}

.centered-container {
 position: relative;
 display: inline-block;
 cursor: pointer;
}

.tooltip-container {
 position: absolute;
 bottom: 125%;
 left: 50%;
 transform: translateX(-50%);
}

.tooltip-text {
 display: none;
 background-color: #333;
 color: #fff;
 padding: 8px;
 border-radius: 4px;
 z-index: 1;
 white-space: nowrap;
 opacity: 0;
 transition: opacity 0.3s ease-in-out;
}

.centered-container:hover .tooltip-text {
 display: block;
 opacity: 1;
}

.tooltip-text::before {
 content: '';
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #333 transparent transparent transparent;
}

Output

output

How to Add Effects to Tooltips

For adding effects to improve our tooltips, we can add options such as bounce, fade, or grow effect, color change, delay in appearance, etc.

This example will show how we can change the border-radius and fade a tooltip with the help of transition. For fading, a tooltip initially set the CSS opacity property to 0 to make the element invisible. For seeing a transition in the border radius and value. Add duration to both the properties to see a smooth effect.

Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <title>Centered Tooltip with Arrow</title>
</head>
<body>
   <div class="centered-container">
       <div class="tooltip-container">
           <div class="hover-text">Top
               <span class="tooltip-text top">Tooltip Text</span>
           </div>
       </div>
   </div>
</body>
</html>

CSS

  • CSS

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.centered-container {
  text-align: center;
}

.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-text {
  display: block;
  background-color: #333;
  color: #fff;
  padding: 8px;
  z-index: 1;
  white-space: nowrap;
  opacity: 0;
  border-radius: 0;
  transition: opacity 3s, border-radius 5s;
}

.tooltip-container:hover .tooltip-text {
  opacity: 1;
  border-radius: 50%;
}

.tooltip-text::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

 

Output:

output

How to Create a Tooltip With an Image

Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <title>Centered Tooltip with Arrow</title>
</head>
<body>
   <div class="tooltip-container">
       <div class="tooltip-content">
           <img src="picture.jpg.png" alt="Image Tooltip" class="centered-image">
           <span class="tooltip-text">This is an image tooltip</span>
       </div>
   </div>

</body>
</html>

CSS

  • CSS

CSS

.tooltip-container {
 position: relative;
 display: inline-block;
 cursor: pointer;
}

.tooltip-content {
 position: relative;
 display: inline-block;
 text-align: center; /* Center the contents horizontally */
}

.centered-image {
 display: block;
 margin: 0 auto; /* Center the image horizontally */
}

.tooltip-text {
 display: none;
 position: absolute;
 background-color: #333;
 color: #fff;
 padding: 5px;
 border-radius: 5px;
 z-index: 1;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 white-space: nowrap;
}

.tooltip-content:hover .tooltip-text {
 display: block;
}

.tooltip-text::before {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 border-width: 5px;
 border-style: solid;
 border-color: #333 transparent transparent transparent;
 transform: translateX(-50%);
}

output

output

How to Create a tooltip without coding Knowledge

For building a native tooltip, we can use the app called Userpilot. This app allows us to create and customize tooltips on our desired webpage without writing a single line of code. We can modify the color, text, or placement of the tooltip as per requirement and “ publish” to see the changes effectively.

Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <title>Centered Tooltip with Arrow</title>
</head>
<body>
   <div class="hover-text bounce">
       <p>Styling Example</p>
       <span class="tooltip-text">
           <p>Tooltip Text</p>
       </span>
   </div>
</body>
</html>

CSS

  • CSS

CSS

.tooltip-text {
 visibility: hidden;
 position: absolute;
 z-index: 1;
 width: 100px;
 color: white;
 background-color: #B1B2FF;
 padding: 5px;
}
.hover-text {
 position: relative;
 display: inline-block;
 margin: 40px;
 text-align: center;
}
.bounce .tooltip-text {
 top: -20%;
 left: 115%;
}
.bounce:hover .tooltip-text {
 visibility: visible;  
 opacity: 1;
 border-radius: 50%;
 border: 5px solid #6F38C5;
 transition: 0.5s linear;
 animation: bouncing 1s ease-in-out infinite alternate;
}
@keyframes bouncing {
 0% {
   transform: translateY(5px);
 }
 100% {
   transform: translateY(1px);
 }
}

Output

output

HTML Tooltip Examples

Example 1: Position of a tooltip with Top and Bottom value

Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <title>Centered Tooltip with Arrow</title>
</head>
<body>
   <div class="hover-text">Top
       <span class="tooltip-text top">Tooltip Text</span>
   </div>
   <br>
   <div class="hover-text">Bottom
       <span class="tooltip-text bottom">Tooltip Text</span>
   </div>
</body>
</html>

CSS

  • CSS

CSS

.hover-text {
 position: relative;
 display: inline-block;
 margin: 40px;
 text-align: center;
}

.hover-text:hover .tooltip-text {
 visibility: visible;
}

.tooltip-text {
 visibility: hidden;
 position: absolute;
 z-index: 1;
 width: 100px;
 color: white;
 background-color: #192733;
 padding: 5px;
}

.top {
 z-index: 0;
 bottom: 110%;
 left: 0;
 right: 0;
 margin: 0 auto;
}

.bottom {
 z-index: 1;
 top: 110%;
 left: 0;
 right: 0;
 margin: 0 auto;
}

Output

output1
output2

Example 2: Using tooltip on links

Code 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <title>Centered Tooltip with Arrow</title>
</head>
<body>
   <a href="https://www.scaler.com/topics/" title="To empower You.">
       Coding Ninjas Studio</a>
   

</body>
</html>

CSS

  • CSS

CSS

.hover-text {
  position: relative;
  display: inline-block;
  margin: 40px;
  text-align: center;
}

.hover-text:hover .tooltip-text {
  visibility: visible;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width: 100px;
  color: white;
  background-color: #192733;
  padding: 5px;
}

.top {
  z-index: 0;
  bottom: 110%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.bottom {
  z-index: 1;
  top: 110%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

 

Output

output

Frequently Asked Questions

How valuable is HTML Tooltip?

HTML tooltip helps us save space to add extra information since it can be added as a hover text whenever the mouse hovers over a certain element, and then the subsequent text is shown to make it more interactive.

What is the syntax to add an HTML Tooltip?

The syntax to add an HTML tooltip is to use the title attribute on the HTML element that we want to have the tooltip on. We can do this by using the button element and putting the text “This is the tooltip text” inside the title tag. And to show the text we will write “Hover over me” and then close the button element.

Can I add images or videos to my HTML Tooltips?

Yes, we can add images as well as videos to HTML tooltips. As we have seen previously in the blog also hoe we have added the Coding Ninjas logo as an HTML tooltip so that when the user hovers over the elements it shows the Coding Ninjas logo.

How can one make Tooltips more interactive using JavaScript?

We can make HTML tooltips more interactive with JavaScript by using event listeners which detects to show tooltip text when the mouse is hovered over an element and then it can hide when the tooltip when the mouse is taken away.

What is the tooltip button?

tooltip button is the button in which when the user will hover over the button element it will pop up some text to it.

What is the title of the tooltip in HTML?

Title of the tooltip in HTML is “HTML Tooltip” which will be reflected in the browser.

How do I show tooltip on click?

We can show tooltip on click with top position, right position, Left position, and bottom position.

How to use Bootstrap tooltip in HTML?

For creating a tooltip using Bootstrap in HTML , add the data-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized using JQuery.

Conclusion

Thus, in this blog, we have seen how HTML tooltips help one have a more interactive website and also keep the website clean and attractive. It also helps make space for other content, since the tooltip content is only visible when the mouse is hovered over the HTML element.

We can add images as well as videos and also make it more interactive by using JavaScript or JQuery or also even simple CSS would suffice. For more information related to attributes in html, bootstrap tooltip, etc.

Verify Tooltip using Web Driver

Bootstrap -Tooltip Plugin

Attributes in HTML

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available; look at the Top 150 Interview Puzzles,  interview experiences, and interview bundle for placement preparations. Read our blogs on aptitude, competitive programming, interview questions, IT certifications, and data structures and algorithms for the best practice.

Previous article
Head and Layout In HTML
Next article
HTML User Input and Computer Code
Library:
Java
Python
C Programming Language
C++ Programming Language
Cloud Computing
Node JS
Machine Learning
Deep Learning
Big Data
Operating System
Go Language
C#
Ruby
Amazon Web Services
Microsoft Azure
Google Cloud Platform
Data Warehousing
Internet of Things

Interested in Coding Ninjas Flagship Courses?

ninja
Coding Ninjas Studio
Download our app:
Download App
CODING NINJAS
About Us Press Privacy Policy Terms & Conditions Bug Bounty Hire from Coding Ninjas Studio
PRODUCTS
Problem of the day Interview Problems Interview Experiences Interview Bundle Guided Paths Library Test Series Contest Online Compiler Problem Lists
COMMUNITY
Coding Ninjas Studio Blog Events Campus Ninjas
We accept payments using:
VISA acceptedPayPal acceptedUPI acceptedNo cost EMI
100% safe payment
SSL securedRazorpay