IDIOT DEVELOPER

Creating a Simple CSS3 Tooltips
Creating a Simple CSS3 Tooltip

Tooltips are one of the useful ways of presenting more information to the user by simply hovering over a text, an image , or anything else. They can be used to provide a description about the entity like – caption on an image, description for links, or any other useful information that will improve your user experience.

 

Today in this tutorial, we are going to create a simple tooltip using HTML and CSS to display the title tag.

 

Lets start by creating a simple anchor tag and giving it a title which will act as content of the tooltip.

 


<a href="#" title="This tooltip is built using pure CSS3" class="tooltip">Tooltip</a>

 

The next step is to create a style for the tooltip class.

 


.tooltip{
  display: inline;
  position: relative;
}

 

Next we will create a body for the tooltip that will display when we hover over the anchor tag.

 


.tooltip:hover:before{
  background: #000;
  border-radius: 2px;
  bottom: 26px;
  color: #fff;
  font-size: 15px;
  content: attr(title);
  left: 20%;
  padding: 5px;
  position: absolute;
  z-index: 98;
  width: 200px;
}

 

We are using an :hover selector to select an element, :after will insert the content after the selected element.  We have given the tooltip body a black background , white text color, and some other styling properties.

 

The content that is displayed in the tooltip body is taken from the title attribute of the selected element. For that we use:

 


content: attr(title);

 

This property allows us to insert the content we want which can be a string, a media file or an attribute of the element. In this case we are using the title attribute of the link.

 

Now when we hover over the anchor tag we can see the tooltip body with the information in it. But one problem is there, the title information is seen twice. To solve this problem we make some changes in our code.

 


<a href="#" title="This is some information for our tooltip."><span title="">CSS3 Tooltip</span></a>

 

We have wrapped the text within the span tag which have an empty title tag. So the browser will display an empty title, we can say it will display only our tooltip body nothing else.

 

To finish we will add an arrow to the bottom of the tooltip, to give it that little extra touch of style. We do this by using the :before selector and some border styles:

 


.tooltip:hover:before{
  border-top: 6px solid #000;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 0px solid transparent;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

 

We are using borders to create a small arrow at the bottom of the tooltip body.

 

Complete Code

 


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.tooltip{
  display: inline;
  position: relative;
}

.tooltip:hover:after{
  background: #000;
  border-radius: 2px;
  bottom: 26px;
  color: #fff;
  font-size: 15px;
  content: attr(title);
  left: 20%;
  padding: 5px;
  position: absolute;
  z-index: 98;
  width: 200px;
}

.tooltip:hover:before{
  border-top: 6px solid #000;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 0px solid transparent;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

</style>
</head>

<body>

<h1>Tooltip in Pure CSS</h1>

<a href="#" title="This is some information for our tooltip." class="tooltip"><span title="">CSS3 Tooltip</span></a>
<br/>
<br/>
<div title="This is tooltip developed in CSS." class="tooltip"><span title="">Tooltip</span></div>

</body>
</html>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *