HTML & CSS: Tooltips – Creating Basic Rollover Pop-ups

Tooltips Tutorial

In this tutorial, you’ll be learning how to use both CSS and mouse actions, to display additional text next to a link when it’s rolled over with the mouse. Tooltips are the name for an element within a graphical user interface, that provides additional information when a cursor hover over an item. With just a bit of code, you can learn how to produce your own tooltips, which you can later customise.

 

1) First in HTML file inside the <body> tag, write this code:

<a class = “tip” href = “#”>
Tool Tip
<span>Learn more about tool tips here!</span>
</a>

 

Lets break down the code:

a class = “tip” – This assigns a class to the link, that will differentiate it it from other links that will not contain tooltips.

href = “#” – For the sake of this tutorial, the link is blank, but here you can add the URL instead of a hash.

<span>Learn more about tool tips here!</span> – This is the text that will appear in the tooltip.

 

2) Now lets start on the CSS.  Enter this code into the style sheet:

a {
text-decoration:    none;
font-weight:        bold;
}

This code will remove any formatting on the link text, including it’s typical underlining.  It will then make the text bold.

a.tip {
position:      relative;
z-index:       20;
}

This defines the settings for the tip class. Position: relative makes sure that the link it presented as it should normally do in a block of text and z-index makes sure the link is displayed underneath any text with a higher z-index value. Think of a z-index as using layers.

a.tip: hover { z-index: 21; }
a.tip span { display: none; }

a.tip: hover is used to select all elements within the “tip” class when the mouse hovers over.  In this case, it’s set the z-index for all these elements to 21.

a.tip span { display: none; } makes the text inside the <span> tag invisible while the mouse isn’t hovering over the link.

 

3) Time to write the code for the style of the tooltip box:

a.tip:hover span {
font-weight:        normal;
display:            block;
position:           absolute;
top:                20px;
left:               60px;
width:              210px;
padding:            5px;
background-color:   #FFC;
color:              #000;
box-shadow:         2px 2px 3px rgba(0,0,0,0.3);
}

 

The end result should look like this in a web browser:

tooltip

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.