How to create a nice tooltip using only CSS How to create a nice tooltip using only CSS

Did you know you can create nicey nicey tootips with just CSS code? In this example we will go through the process and show you exactly how this can be done without using any javascript or images, only pure CSS code, which is nice!

Firstly I'll explain what a tooltip is: A tooltip is a brief message that will appear when you hover over a link, this message might be a simple sentence explaining where the link will take us or just stating some relevant information about the link.

OK, let’s get on with showing you how to create these wonderful tooltips as shown in the image below.

Step 1

To start our tooltip, we need to create a CSS class.

a.tooltip {
    position: relative;
    display:inline-block;
}


position: relative; – Our tooltip position will be relative to our class.
display: inline-block; – Our tooltip class will display inline.

Step 2

Here we will start to create the actual tooltip container.

a.tooltip span {
    position: absolute;
    left:50%;
    width:140px;
    padding:6px;
    margin-left:-76px;
    background:#000;
    color:#fff;
    text-align: center;
    visibility: hidden;
    border-radius:5px;}


position: absolute; – Our tooltip will be have a position of absolute.
left: 50%; – This will position our tooltip centered at the end of our element.
width: 140px; – Our tooltip container will have a width of 140px.
padding: 6px; – There will be padding around our text of 6px.
margin-left: -76px; – This number will center our tooltip with the element.
background: #000; – The background of our tooltip will be black.
color: #fff; – The text color will be white.
text-align: center; – The text in the tooltip will be centered.
visibility: hidden; – This will set our tooltip container to hidden.
border-radius: 5px; – This will give our container a border radius of 5px.

Step 3

Now that we have created our tooltip container, we can now add a triangle to the tooltip using the :after selector.

a.tooltip span:after {
    content:'';
    position: absolute;
    top:100%;
    left:50%;
    margin-left:-8px;
    width:0; height:0;
    border-top:8px solid #000;
    border-right:8px solid transparent;
    border-left:8px solid transparent;
}


content: ”; – Sets the content to nothing.
position: absolute; – The arrow will be positioned absolute.
top: 100%; – Positions the arrow at the bottom of the tooltip.
left: 50%; – The arrow will be in the center of the tooltip.
margin-left: -8px; – Because our arrow is 16px wide, we need to shift the arrow -8px to get it back to center.
width: 0; height: 0 – Sets the width and height to zero.
border-top: 8px solid #000; – Gives the arrow a background of black.
border-right: 8px solid transparent; – Used to create the arrow.
border-left: 8px solid transparent; – Used to create the arrow.

Step 4

Finally we need to set the properties for when the user hovers over the link element.

a:hover.tooltip span {
    visibility: visible;
    opacity:0.8;
    bottom:30px;
    z-index:999;
}


visibility: visible; – Shows the tooltip when the user hovers over the link.
opacity: 0.8; – Gives the tooltip an opacity of 0.8
bottom: 30px; – Moves the tooltip to above the element.
z-index: 999; – The z-index will make sure that the tooltip is in front of other elements.

Step 5

All of our CSS is now completed, with the code above that is all that is required for the style of the tooltip, however, we now need to add some HTML to show you how to achieve the tooltip when a user hovers over a link element.
All we need to do is add the .tooltip class to our link to activate our tooltip, plus will need to add a <span> element for the text used in our tooltip.

<a class="tooltip" href="#">Hover over me!<span>This is a Tooltip using CSS</span></a>