HTML Tooltip

Consider ourselves on a website or online app, and we come across a symbol, a form field, or an instruction that you need clarification on what it means. If we're like most people, we'll naturally hover our cursor over the element in search of a little pop-up window that offers further details.

The term for what we're searching for is a tooltip. To provide microcopy to a web page without clogging the display, tooltips are a crucial part of user interfaces. Forms, checkout flows, tutorials, and other flows where users might have more queries than normal benefit greatly from tooltips.

What does an HTML Tooltip Mean?

When a user hovers their mouse over an element in a user interface, the text known as a tooltip emerges, usually, a tooltip will have text that offers extra explanation, context, or directions that users may find useful.

Tooltips are excellent for text that may be concealed to free up space on the page but are still readily available to users when needed. For instance, a tooltip that describes the function of a button may show when a user hovers over a menu item or icon.

How to Use an HTML Tooltip

HTML uses the tooltip concept to display more information about the chosen element. When a user moves the mouse over an element that is utilizing a tooltip to show specific information about that element, this may be done on the mouse hover effect.

It is utilized as an inline element, similar to a span, and occasionally has class tooltip text. Using CSS, one may position the tooltip text, helping us to specify a style and position for our tooltip. Because a tooltip provides brief details about included items, including one on our Web pages allows us to communicate with users more.

Syntax

The tooltip is defined by HTML using a link with a title element. It might mean the following:

The text displayed in the title attribute is regarded as tool-tipped text, as seen by the syntax above. Users may view more details about it by clicking this link.

The user may add the title to the element since it is regarded as a global property, which is similar to adding a class or ID. With its assistance, one may add just about anything, such as a paragraph or div block that contains an entire column. In essence, a tooltip is displayed over the element. Tooltips can be placed in several locations, including the top, bottom, left, or right. By utilizing a value set in CSS, this location is applied to their tooltip.

How can a Tooltip be added to HTML?

The element in HTML can have a tooltip added to it. It also makes use of numerous other components, including div and paragraph. When a mouse is hovered over an attribute, text or other information known as a tooltip will appear. It may be seen at any point in the text, whether it's on the right, left, top, or bottom. This is what it is:

Top Position

A tooltip will be seen at the top of the element at this place.

.tooltip.tooltiptext{
width: 100px;
bottom: 50%;
left: 20%;
margin-left: 50px;
}

Right Position

This tooltip code causes a tooltip to be displayed on the element's right side.

.tooltip.tooltiptext{
top: 6px;
left: 50%;
}

Left Position

This tooltip code causes a tooltip to be displayed on the element's left side.

.tooltip.tooltiptext{
top: 6px;
right: 50%;
}

Bottom position

The tooltip will be seen at the bottom of the element.

.tooltip.tooltiptext{
width: 90px;
top: 50%;
left: 50%;
margin-left: 50px;
}

By employing the tooltip feature that is specified in it, one may additionally display an arrowed tooltip to the element. The connected webpage, associated documents, or pictures may all be opened using HTML tooltips. We can demonstrate how utilizing a tooltip displays it with a fade-in effect, much like an animation effect. Using the following code, we can accomplish this:

.tooltip.tooltiptext{
opacity:0;
transition: opacity 7s;
}
.tooltip:hover.tooltiptext{
opacity:0;

We can accomplish the most crucial task by utilizing a tooltip to open a modal box with just one click. This sort of code is typically utilized anytime it's necessary to access a certain form or other details utilizing a straightforward link. The least amount of code is used to open the modal in this manner.

Examples of Tooltips in HTML

The HTML tooltip examples are as follows:

Example 1

This is one illustration of how to display the Right and Left values of a tooltip's location.

<!DOCTYPE html>
<html>
<style>
/*right position*/
.tooltipright{
position: relative;
display: inline-block;
border-bottom: 1px solid red;
}
.tooltipright .toolttext {
visibility: hidden;
width: 150px;
height:50px;
background-color: pink;
color: black;
text-align: left;
border-radius: 3px;
padding: 6px ;
/* Positioning the tooltip */
position: absolute;
z-index: 0;
left: 150%;
}
.tooltipright .toolttext {
visibility: visible;
}
/*left position*/
.tooltipleft{
position: relative;
display: inline-block;
border-bottom: 1px solid red;
}
.tooltipleft .toolttextleft {
visibility: hidden;
width: 100px;
height:50px;
background-color: pink;
color: black;
text-align: center;
border-radius: 3px;
padding: 3px ;
/* Position the tooltip */
position: absolute;
z-index: 1;
right: 120%;
}
.tooltipleft:hover .toolttextleft {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Tooltip with left and right position</h2>
<p style="color :green;">Tooltip with Right position</p>
<div class="tooltipright">Hii Welcome
<span class="toolttext">Welcome to the course and lets start the tutorial</span>
</div>
<br>
<p style="color :green;">Tooltip with Left position</p>
<div class="tooltipleft">Congratulations!!
<span class="toolttextleft">You have completed </span>
</div>
</body>
</html>

Output:

Example 2

This example shows how tooltips may be used for both pictures and some links. As a result, anytime the user hovers their cursor over it, information or a clickable link to launch another webpage or document will be displayed.

<html>
<head>
<title>HTML tooltip</title>
</head>
<body>
<h4>Example of HTML Tooptip on Image and Link</h4>
<img src="Flower.jpg" title="Flower"/
style="height:120px; width:200px;">
<br/>
<a href="https://unsplash.com/wallpapers/nature/flower" title="Flower">
Image of a flower</a>
</body>
</html>

Output:

Example 3

A tooltip is the ideal choice to tackle this issue quickly if we want to display a pop-up when the user hovers over or clicks on particular items.

<html>
<head>
<title>Example of HTML tooltip</title>
</head>
<style>
.arrowpopup {
position: relative;
display: inline-block;
cursor: arrow;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 130px;
background-color: pink;
color: black;
text-align: center;
border-radius: 2px;
padding: 3px ;
position: absolute;
bottom: 100%;
left: 60%;
margin-left: 20px;
}
.arrowpopup .tooltiptext::after {
content: "";
position: absolute;
top: 120%;
left: 60%;
margin-left: 4px;
border-width: 7px;
border-style: dotted;
border-color: pink transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
</style>
<body style="padding:90px;">
<div class="arrowpopup" onclick="myFunction()">Hii!!Welcome!
<span class="tooltiptext" id="tooltipdemo">Lets begin the session</span>
</div>
<script>
function myFunction() {
var tt = document.getElementById("tooltipdemo");
tt.classList.toggle("show");
}
</script>
</body>
</html>

Output:

Conclusion

All of the information we have just learned led us to the conclusion that a tooltip is a feature in HTML that is used to display some relevant information or brief explanations of a chosen element. The user can select the location of this tooltip's appearance about the element. The position value will be either top, bottom, right, or left.

Next TopicHTML Boilerplate

← prev next →