CSS Tooltip
How to create CSS Tooltips?
CSS tooltips is a showing extra content when the user goes on the element and mouse over or mouse click then it show hide content. We use pure CSS for the creating CSS tooltips. For it, we have used CSS position property and display property. Also required for the CSS after property.
Code demo
Simple CSS Tooltips examples:
CSS tooltips is a showing extra content when the user goes on the element and mouse over or mouse click then it show hide content. We use pure CSS for the creating CSS tooltips. For it, we have used CSS position property and display property. Also required for the CSS after property.
Code demo
Simple CSS Tooltips examples:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Tooltips</title>
<style>
.anthingTooltip { position: relative; display: inline-block; border: 1px solid #ccc; background: #eee; border-radius: 4px; padding: 5px 15px; cursor: pointer; }
.anthingTooltip
.anthingContainer { visibility: hidden; width: 120px; background-color: #0bf; color: #fff; text-align: center; padding: 5px 0; opacity: 0; transition: all 0.5s; border-radius: 6px; position: absolute; z-index: 1; top: 100%; left: 0; cursor: default; }
.anthingTooltip:hover
.anthingContainer { visibility: visible; opacity: 1; transition: all 0.5s; }
.anthingTooltip
.anthingContainer::after { content: " "; position: absolute; bottom: 100%; left: 50%; border-width: 5px; border-style: solid; border-color: transparent transparent #0bf transparent; margin-left: -5px; }
</style>
</head>
<body>
<div class="anthingTooltip">Button Text
<div class="anthingContainer">Any content</div>
</div>
</body>
</html>
No comments:
Note: Only a member of this blog may post a comment.