Create Simple Tooltip Using CSS3

Saturday, Apr 8, 2017

Tags:- CSS3 HTML


Tooltip is a great way to explain a link or a button in a webpage if you want to give some small additional info of something so you can use tooltip and customise with css in your own way.In this tutorial we will show you how to create simple tooltip using CSS3.You may also like CSS3 animated headlines.


See Demo
Create Simple CSS3 Tooltip


To Create Tooltip Using CSS3 It Takes Only One Step:-

  1. Make a HTML file and define markup and styling


Step 1.Make a HTML file and define markup and styling

We make a HTML file and save it with a name tooltip.html

<html>
<head>
<style>
.tooltip
{
 display: inline;
 position: relative;
}
.tooltip:hover:after
{
 background: #333;
 background: rgba(0,0,0,.8);
 border-radius: 5px;
 bottom: 26px;
 color: #fff;
 content: attr(title);
 left: 20%;
 padding: 5px 15px;
 position: absolute;
 z-index: 98;
 width: 220px;
}
.tooltip:hover:before
{
 border: solid;
 border-color: #333 transparent;
 border-width: 6px 6px 0 6px;
 bottom: 20px;
 content: "";
 left: 50%;
 position: absolute;
 z-index: 99;
}
</style>
</head>
<body>
<div id="wrapper">
<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>
</div>
</body>
</html>

In this step we create an anchor tag and insert 'title' attribute this is our tooltip text which is displayed as a tooltip.Now let's come to our CSS we use CSS3 hover:after and hover:before to apply styling in hover:after we use simple css to style the tooltip and in hover:before we create a simple triangle using css just to give more styling to our tooltip.You may also like CSS3 fancy animated buttons.


Thats all, this is how to create simple tooltip using CSS3.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email