✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Create Simple Tooltip Using CSS3

Last Updated : Apr 15, 2022

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

Create Simple Tooltip Using CSS3

CHECK OUT THIS TUTORIAL LIVE 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 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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials