Create Simple Tooltip Using CSS3

Datetime:2016-08-23 03:07:07          Topic: CSS3           Share

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.

See Demo

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 tutorial 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.

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.





About List