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:
<!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.

Copyright Reserved to Anything Learn. Powered by Blogger.