CSS Tooltip

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Tooltip </title>
<meta charset="UTF-8">
</head>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: green;
color: #fff;
text-align: center;
border-radius: 10px;
padding: 10px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

CSS Tooltip

Move the mouse over the text below:

Hover over me Tooltip text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Recommended :

1 . How float work in CSS ?
2 . What is an HTML Tag?
3 . How to use label in HTML
4 . Learn CSS Navigation Bar

5 . How to add pagination on Webpage
6 . Change property using Attribute Selector
7 . Create Youtube Thumbnail Generater in PHP
8 . Create Simple Login Form

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors