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 . What are CSS Selector ?
2 . How to Insert Images in HTML Pages
3 . Create table using CSS
4 . Learn CSS Navigation Bar

5 . CSS beautiful buttons
6 . CSS 3 Transition
7 . Photography Snippets using HTML and CSS
8 . BootStrap 4 Photography Snippets

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