Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

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

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH