How to Make Custom Tooltips in HTML and CSS
In this article, I will show you how to make custom tooltips on your web pages using only HTML and CSS.
A tooltip is a small informational box that appears when a user hovers the mouse over certain HTML elements such as links or buttons.
It appears next to the hovered element and can be positioned on any side (top, bottom, left, or right) of the element.
Tooltips are used as a way to provide additional information to website users about the element. For instance, a tooltip can be used to explain to the user what to expect on clicking a button (eg. "Create a new user", "Edit user details", etc).
Most browsers provide default tooltips, which can easily be added to an element by just adding a title attribute with the tooltip text as its value, to the element.
<button type="button" id="mybtn" title="Click to edit the user details">Edit</button>
However, these default tooltips take long to appear on hovering over an element and also lack customization options.
Most frontend frameworks such as Bootstrap provide an easy and quick way to add more advanced and customizable tooltips.
Besides the use of the tooltip component of Bootstrap and the default "title" attribute tooltip, you may be wondering whether it's possible to make a custom one with just HTML and CSS. Yes, it is!
I will show you how to create your own custom tooltips that match the style and design of your website using only HTML and CSS.
Creating a Custom Tooltip in HTML and CSS
Follow the steps below:
HTML Setup
To begin, we'll set up the basic HTML structure required for our custom tooltip. We'll need an element that triggers the tooltip and a hidden child element that will display the tooltip content.
Here's an example:
<div class="trigger">
<button type="button" class="mybtn">Hover me!</button>
<div class="tooltip">
This is a sample tooltip text.
</div>
</div>
In the above example, we want to show a tooltip when users hover the mouse over the button. We have the button element and a div element that contains the tooltip text next to it.
We have enclosed them with a parent div element that will help position the tooltip next to the button and also trigger the showing of the tooltip div.
CSS Styling
Next, we will give the trigger/parent element a relative position and a width value of max-content CSS.
.trigger {
position: relative;
width: max-content;
}
We then style our button as we would like it to look.
.mybtn{
background: green;
color: #fff;
border: none;
border-radius: 5px;
padding: 6px 12px;
font-size: 18px;
}
Next, we'll style the element with the tooltip text and give it a custom look and feel.
.tooltip {
/*Styling the tooltip background*/
background-color: #390384;
padding: 10px;
border-radius: 5px;
width: 200px;
/*Styling the tooltip text*/
text-align: center;
color: white;
font-size: 14px;
line-height: 18px;
/*Positioning the tooltip*/
position: absolute;
z-index: 1;
left: 50%;
top: 115%;
transform: translateX(-50%);
/*Setting the tooltip to be hidden by default*/
opacity: 0;
}
In the above CSS code, we have started by styling the appearance of our tooltip where we have given it a purple background and width of 200 pixels, rounded corners, and a padding of 10 pixels around the text.
We have then positioned the text at the center, giving it a white color, a font size, and line height to allow some space between lines.
Next, we have positioned the tooltip absolutely, horizontally centrally below the button (by using the top, left, and transform properties) and to appear over the text/elements below the button by setting the z-index property value to 1.
Lastly, we have set the tooltip opacity to 0 so that it will be hidden by default.
We will then need to show the tooltip when the users hover over the trigger element by using the CSS :hover pseudo-class on the trigger element and setting the tooltip opacity to 1.
.trigger:hover .tooltip {
opacity: 1;
transition: 0.5s;
transition-delay: 0.1s;
}
I have also added some transitions to it. See the result below.
But as you may already know, tooltips usually have a small arrow/caret pointing to the element triggering it. To have one in the tooltip above, add the CSS code below:
.tooltip::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #390384 transparent;
}
Below is our tooltip with the arrow at its top side pointing to the button.
Below is the full HTML and CSS code with a custom tooltip (with an arrow) positioned at the bottom of a button.
<!DOCTYPE html>
<html>
<head>
<title>Creating a Custom Tooltips</title>
<style>
body {
padding: 50px;
text-align: center;
}
.trigger {
position: relative;
}
.mybtn{
background: green;
color: #fff;
border: none;
border-radius: 5px;
padding: 6px 12px;
font-size: 18px;
}
.tooltip {
background-color: #390384;
padding: 10px;
border-radius: 5px;
width: 200px;
text-align: center;
color: white;
font-size: 14px;
line-height: 18px;
position: absolute;
z-index: 1;
left: 50%;
top: 115%;
transform: translateX(-50%);
opacity: 0;
}
.tooltip::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #390384 transparent;
}
.trigger:hover .tooltip {
opacity: 1;
transition: 0.5s;
transition-delay: 0.1s;
}
</style>
</head>
<body>
<div class="trigger">
<button class="mybtn">Hover me!</button>
<div class="tooltip">
This is a sample tooltip text.
</div>
</div>
</body>
</html>
Changing the tooltip position
In the above examples, we placed the tooltip at the bottom of the trigger element. However, it can be placed also at the top, left, or right side.
We can easily change the position of the tooltip by substituting its top, bottom, left, and right properties
Using the code above, you will only make changes to the CSS properties mentioned below and everything else remains the same.
Positioning the tooltip at the top
To position the tooltip in the above code to the top of the button, replace the top property with bottom. You can also change its percentage value to control the distance between the element and the tooltip.
.tooltip {
bottom: 115%;
}
You will also need to change the position of the arrow from bottom to top and the order of the values in the border-color property as below so as to have the arrow below the tooltip pointing to the button.
.tooltip::after {
top: 100%;
border-color: #390384 transparent transparent transparent;
}
Positioning the tooltip to the right
To position the tooltip to the right, change the left property to top, the top property to left, and the value of transform to translateY.
.tooltip {
top: 50%;
left: 115%;
transform: translateY(-50%);
}
Then in the arrow CSS code, change the bottom property to right, the left property to top, the value of transform to translateY, and the order of the values in the border-color property as below.
.tooltip::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-color: transparent #390384 transparent transparent;
}
Positioning the tooltip to the left
To position the tooltip to the left, change the left property to top, the top property to right, and the value of transform to translateY.
.tooltip {
top: 50%;
right: 115%;
transform: translateY(-50%);
}
Then in the arrow CSS code, change the bottom property to left, the left property to top, the value of transform to translateY, and the order of the values in the border-color property as below.
.tooltip::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-right: -5px;
border-color: transparent transparent transparent #390384;
}
To increase or reduce the size of the tooltip arrow, change the value of the border-width property.
Adding custom tooltips to words in paragraphs
You can also add tooltips to specific words within your paragraphs. The implementation is the same as explained above only that you will need to use the <span> element instead of <div> for the trigger text and tooltip content.
Example
<p>The quick brown <span class="trigger">fox <span class="tooltip">The fox is an animal</span></span> jumped over the lazy dog.</p>
The quick brown fox The fox is a wild animal. jumped over the lazy dog.
That's it!
Now you know how to make your own custom tooltips in only HTML and CSS.
You can customize the code snippets above and experiment with different CSS properties until you achieve the desired look and feel for your tooltips.
