In this article I show you how to make a tooltip using HTML & CSS. Tooltips are a great way to provide additional information to your users, and this tutorial will show you how to create them in just a few minutes.
You may have seen tooltips in many websites that when you hover on any image or icons or tool or any other element, it shows the text, that shows the information about that element. In this blog post we going to learn how to create awesome tooltip step by step that appears after a second on hover.
By the end of this tutorial you'll be able to create you own tool tip with customization in HTML & CSS. You'll find the full source code at the end of this blog post.
Benefits of using tooltips:
- Provide additional information to users without cluttering up the interface.
- Help users understand the meaning of icons, buttons, features of your website etc.
- Offer help or guidance to users.
Credit :
Home button icons created by Freepik - FlaticonUser icons created by Freepik - Flaticon
Settings icons created by Freepik - Flaticon
Telephone icons created by Freepik - Flaticon
Toot tip means when you hover on element then a small box with text is appear, that shows the additional information about that element. you can see above image that on hover, text is appeared, that's the tooltip.
I have created simple vertical menu with images and added tool tip to that's user hover on any images or icons the tool tip appears and hide automatically after sometime of hover out. You can see demo and whole video tutorial on it in below YouTube video.
Video Tutorial on CSS ToolTip:
I hope you understand the video. Their is a simple html and css i have used to make this css tooltip. At the bottom of the article their is full code of this css tooltip.
Tooltip Using HTML & CSS.
To create this CSS tooltip, first create one folder and open that folder in your code editor. Then inside that folder in code editor, create two files with html and CSS extension and one folder for images.
Step 1: Create basic html structure.
So first I have created one div tag with class container (class="container") which is for background.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #c02b4b;
}
.box{
background-color: #fff;
height: 100vh;
width: fit-content;
}
Output:
Step 2: Create Sidebar menu and tooltip for its menu items.
After creating the background for sidebar menu. Now we'll create the sidebar menu and tooltip for its list items or menu items. Here we'll add only images inside sidebar menu
Also read: Show and hide sidebar menu using only HTML & CSS.
As you can see in below code that i have added span tag inside list items, tat is for tooltip of particular list items.
HTML
<div class="container">
<div class="box">
<ul>
<li><a href="#"><img src="images/home.png"></a>
<span>Home</span>
</li>
<li><a href="#"><img src="images/user.png"></a>
<span>Profile</span>
</li>
<li><a href="#"><img src="images/setting.png"></a>
<span>Setting</span>
</li>
<li><a href="#"><img src="images/phone-call.png"></a>
<span>Contact Us</span>
</li>
</ul>
</div>
</div>
CSS
.box ul li a img{
width: 40px;
height: auto;
}
.box ul{
padding: 10px 10px;
}
.box ul li{
display: flex;
align-items: center;
margin-bottom: 20px;
position: relative;
}
.box ul li a{
padding: 10px 10px;
display: block;
font-size: 0px;
transition: 0.2s;
}
.box ul li a:hover{
background-color: #0000000d;
border-radius: 8px;
}
span{
position: absolute;
background-color: #fff;
font-size: 22px;
padding: 6px 10px;
max-width: 100px;
width: max-content;
border-radius: 5px;
left: 100px;
pointer-events: none;
}
span::before{
position: absolute;
content: '';
background-color: #fff;
width: 8px;
height: 8px;
transform: rotate(45deg);
top: 14px;
left: -3px;
}
Output:
Step 3: Hide the tooltip initially.
After creating the menu and tooltip for its menu items. We'll hide the tool tip initially, Because we have to show it only when user hover on any on menu items.
So we'll hide the tooltip by using CSS property opacity with value 0;
CSS
span{
position: absolute;
background-color: #fff;
font-size: 22px;
padding: 6px 10px;
max-width: 100px;
width: max-content;
border-radius: 5px;
left: 100px;
opacity: 0;
pointer-events: none;
}
Output:
As you can see in image above that all the tooltip is hidden. Now lets add hover effect to list items or menu items to show hidden tool tip.
Step 4: Show tooltip on hover.
CSS
.box ul li:hover span{
transition-delay: 1000ms;
opacity: 1;
}
See demo in above youtube video.
You may also like:
- How to create custom select menu.
- How to show and hide sidebar menu with only HTML & CSS.
- Close sidebar menu when click outside of it.
- Preview image before uploading using JavaScript.
- How to create animated navigation menu using HTML, CSS & JavaScript.
Final code:
So that's it, tooltip using HTML & CSS is ready. If you have any question or suggestion you can write in comment section.
Share your thoughts.