Introduction to Pure CSS Tooltip
- It is an element to access any small information using the hover effect.
- It displays the messages after keeping the mouse in the required place.
- It is the pure class to show tiny messages of the item using CSS hover.
- It is the function to apply the CSS hover effect on images, items, or weblinks and disclose the related information.
- It is an animated function with the message box of the web application web elements or web links.
Syntax:
- The (HTML page) syntax is below.
<P class = "tooltip" > Pure CSS Tooltip
<span class = "tooltiptext" > Pure CSS tooltip is the most usable style sheet in the world wild. </span>
</P>Description:
- The class = “tooltip” is used to select the Item to create a hover effect.
- The class = “tooltiptext” is used to create a message in the tooltip box.
- The .top, .bottom, .left, and .right are using for select the tooltip box direction.
- The (Style Page) syntax is below.
- The tooltiptext becomes hidden before the hover effect applies in the tooltip class.
.tooltip .tooltiptext {
top: -10px;
left: 55px;
position: absolute;
visibility: hidden;
}- The tooltiptext becomes visible after the hover effect applies in the tooltip class.
.tooltip:hover .tooltiptext {
visibility: visible;
}- The direction (HTML page) syntax is below.
- The top-side syntax is below.
<P class = "tooltip top" > Pure CSS Tooltip </P>- The bottom side syntax is below.
<P class = "tooltip bottom" > Pure CSS Tooltip </P>- The left-side syntax is below.
<P class = "tooltip left" > Pure CSS Tooltip </P>- The right-side syntax is below.
<P class = "tooltip right" > Pure CSS Tooltip </P>- The directions (Style Page) syntax is below.
- The right-side syntax is below.
.tooltip .tooltiptext {
bottom: 20px;
left: 50px;
}- The text in the top-side syntax is below.
.tooltip .tooltiptext {
width: 150px;
bottom: 20px;
left: 50px;
margin-left: -70px;
}How does Pure CSS tooltip work?
- There are two pure.css links in the framework. These responsive and non-responsive links are below.
- The pure.css responsive framework link is added to the HTML files.
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/base-min.css">- The pure.css non-responsive framework link is added to the HTML files.
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-nr-min.css">- The pure.css alternate CDNs file for the responsive framework is added to the HTML files.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.css"/>- Syntax adds to the web page.
<P class = "tooltip" > Pure CSS Tooltip
<span class = "tooltiptext" > Pure CSS tooltip is the most usable style sheet in the world wild. </span>
</P>- The tooltiptext syntax adds in the html page..tooltip .tooltiptext {
top: -10px;
left: 55px;
position: absolute;
visibility: hidden;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}- Combine the working procedure and make a demo of the tooltip.
<!DOCTYPE html>
<html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css">
<style>
.tooltip {
color:blue;
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
top: -10px;
left: 55px;
position: absolute;
border-radius: 6px;
padding: 10px 10px;
visibility: hidden;
width: 120px;
background-color: yellow;
color:blue;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body>
<P class="tooltip"> Pure CSS Tooltip
<span class="tooltiptext"> Pure CSS tooltip is the most usable style sheet in the world wild. </span>
</P>
</body>
</html>Examples
Let us discuss the examples.
Example #1: The basic Pure CSS tooltip with direction example and output
Code:
<html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css">
<style>
.tooltip {
color:blue;
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
top: -10px;
left: 125px;
position: absolute;
border-radius: 6px;
padding: 10px 10px;
visibility: hidden;
width: 120px;
background-color: yellow;
color:blue;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body>
<P class="tooltip right"> Pure CSS Tooltip
<span class="tooltiptext"> Pure CSS tooltip is the most usable style sheet in the world wild. </span>
</P>Output:
Example #2: Arrow and bottom side message box example and output
Code:
<!DOCTYPE html>
<html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css">
<style>
.tooltip {
color:blue;
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: orange;
color: white;
text-align: center;
padding: 15px 10px;
position: absolute;
top: 100%;
left: 45%;
margin-left: -70px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
margin-left: -2px;
border-width: 10px;
bottom: 100px;
left: 55px;
border-style: solid;
border-color: transparent transparent orange transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body>
<P class="tooltip"> Pure CSS Tooltip
<span class="tooltiptext"> Pure CSS tooltip is the most usable style sheet in the world wild. </span>
</P>Output:
Example #3: Multiple message box examples and output
Code:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css">
<style>
body {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 500px;
}
.tooltip {
background-color: orange;
padding: 15px 15px;
position: relative;
margin: 15px;
}
.tooltip::after {
background-color: yellow;
color: black;
display: none;
position: absolute;
z-index: 999;
width: 150px;
height:50px;
}
.tooltip::before {
background-color: yellow;
content: ' ';
display: none;
position: absolute;
width: 15px;
height: 15px;
z-index: 999;
}
.tooltip:hover::after {
display: block;
}
.tooltip:hover::before {
display: block;
}
.tooltip.top::before {
top: 0;
left: 50px;
transform: translate(-55%, calc(-98% - 1px)) rotate(46deg);
}
.tooltip.top::after {
content: 'Pure CSS Tooltip';
top: 0;
left: 50px;
transform: translate(-55%, calc(-98% - 8px));
}
.tooltip.left::before {
top: 50%;
left: 0;
transform: translate(calc(-98% - 3px), -55%) rotate(46deg);
}
.tooltip.left::after {
content: 'Pure CSS Tooltip';
top: 0;
left: 0;
transform: translateX(calc(-98% - 8px));
}
.tooltip.bottom::before {
bottom: 0;
left: 52%;
transform: translate(-52%, calc(98% + 3px)) rotate(45deg);
}
.tooltip.bottom::after {
content: 'Pure CSS Tooltip';
bottom: 0;
left: 52%;
transform: translate(-52%, calc(98% + 8px));
}
</style>
</head>
<body>
<div >
<p class="tooltip top"> Top Side </p>
<p class="tooltip left"> Left Side </p>
<p class="tooltip bottom"> Bottom Side </p>
</div>
</body>
</html>Output:
Conclusion
The Pure CSS tooltip is conveying small message help of one word, web link, and elements. It is a space-saving message box to display using the mouse pointer. It is user-friendly, easy to access information, and displays as per requirement.
Recommended Articles
This is a guide to Pure CSS Tooltip. Here we discuss the Definition, How does Pure CSS tooltip works?, and their Syntax and Examples. You may also have a look at the following articles to learn more –
