Imagine being on a website or web application and encountering a symbol, a field in a form, or a set of instructions that you find unclear. Typically, users tend to hover their mouse pointer over the element, expecting a tooltip to appear with additional information.
The term we are looking for is a tooltip, which is essential for adding microcopy to a web page without cluttering the interface. Tooltips play a significant role in user interfaces, especially in forms, checkout processes, tutorials, and other scenarios where users may have additional questions.
What does an HTML Tooltip Mean?
In user interfaces, when a user moves the mouse cursor over an element, a tooltip appears. Typically, a tooltip contains text providing additional information, context, or guidance that can be beneficial to users.
Tooltips are a great way to provide information that can be hidden to save space on the screen while remaining easily accessible to users when necessary. For example, a tooltip explaining the purpose of a button could appear when a user hovers over a menu item or an icon.
How to Use an HTML Tooltip
HTML incorporates tooltips to reveal additional details about a selected element. These tooltips appear when a user hovers the mouse over an element, providing specific information related to that element.
It serves as an inline element, like a span, and sometimes carries a class tooltip text. Through CSS, we can arrange the tooltip text, enabling us to define a look and location for our tooltip. By offering concise information about elements, incorporating a tooltip on our websites enhances communication with users.
Syntax
HTML defines a tooltip through a hyperlink containing a title attribute. This tooltip could convey the following information:
<a href="" title="tooltip_text"> Content </a>
The text shown in the title attribute is considered tooltip text, as illustrated in the syntax provided. Users can access additional information by clicking on this link.
Users have the option to include a title in the element as it is considered a universal attribute, much like incorporating a class or ID. This feature allows for the addition of various elements, like a paragraph or a div block encompassing a complete column. Essentially, a tooltip emerges above the element, offering additional information. Tooltips can be positioned at various spots, such as the top, bottom, left, or right. The CSS value dictates the placement of the tooltip.
How can a Tooltip be added to HTML?
An HTML element allows for the inclusion of a tooltip, utilizing various components like div and paragraph. When hovering the mouse over an attribute, text, or related information, a tooltip is displayed. The tooltip can appear at different positions relative to the element, such as right, left, top, or bottom. This functionality provides additional context to users as they interact with the content.
Top Position
A tooltip will be displayed above the element in this location.
.tooltip.tooltiptext{
width: 100px;
bottom: 50%;
left: 20%;
margin-left: 50px;
}
Right Position
The provided code snippet enables the display of a tooltip positioned to the right of the element.
.tooltip.tooltiptext{
top: 6px;
left: 50%;
}
Left Position
The provided code snippet enables the appearance of a tooltip on the left side of the element.
.tooltip.tooltiptext{
top: 6px;
right: 50%;
}
Bottom position
The tooltip will be displayed beneath the element.
.tooltip.tooltiptext{
width: 90px;
top: 50%;
left: 50%;
margin-left: 50px;
}
Utilizing the tooltip functionality provided, it is possible to show a tooltip with an arrow pointing to the element. HTML tooltips can be used to link to web pages, related files, or images. An example can be shown where a tooltip appears with a fading animation effect. The code snippet below demonstrates this behavior:
.tooltip.tooltiptext{
opacity:0;
transition: opacity 7s;
}
.tooltip:hover.tooltiptext{
opacity:0;
Achieving the primary task can be done efficiently by employing a tooltip to trigger the opening of a modal box with a single click. This type of functionality is commonly applied when there is a need to conveniently access a specific form or other information through a simple link. By utilizing this method, the modal can be opened with minimal code.
Examples of Tooltips in HTML
The HTML tooltip examples are as follows:
Example 1
Here is an example demonstrating how to showcase the values for the Right and Left positions of a tooltip's placement.
<!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
In this instance, tooltips are demonstrated for images and hyperlinks. Whenever a user hovers over them, details or a clickable option to open a new webpage or file will appear.
<html>
<head>
<title>HTML tooltip</title>
</head>
<body>
<h4>Example of HTML Tooptip on Image and Link</h4>
<img src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" 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
Utilizing a tooltip is the optimal solution for efficiently addressing this matter when there is a need to showcase a popup when a user hovers over or clicks on specific elements.
<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
The knowledge we've acquired indicates that a tooltip in HTML is a functionality designed to present pertinent details or concise descriptions of a selected element. Users have the flexibility to specify where this tooltip should appear in relation to the element, with options including top, bottom, right, or left positions.