1
Tooltips are a great way to show your user more information by simply hovering over an image or text. They can be used, for example, to provide captions for images, or longer descriptions for links, or any useful information which would improve the user experience of your site, without intruding on the design.
Today I’m going to show you how to create a simple tooltip using HTML and CSS to display the title tag of your hyperlinks.
Let’s start off by creating some simple markup for the link. We need to give it a title which will be the tooltip content, and assign it a class:
<a title="This is some information for our tooltip." class="tooltip">CSS3 Tooltip</a>
The next step is to create some rudimentary styling for our tooltip class:
.tooltip{
display: inline;
position: relative;
}We are now displaying our tooltip inline with our link using relative positioning. Next we want to create the a rounded box to form the body of the tooltip, and position it so that it floats above the link:
.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;
}We are using the :hover selector which selects an element, in this case our link, on mouseover and the :after selector, which inserts content after the selected element. We have specified a black background with 80% opacity, and for browsers that do not support RGBA colors we have provided a dark grey background.
Slightly rounded corners are created by using the border-radius attribute and we have set the text color to white. Lastly, we have positioned the tooltip box from the left of the link and added a little padding.
As well as the styling and positioning, we have set the content property:
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 you hover over your link a tooltip should be appear above it with the text you set as your link title. We have one problem though, the title information is being shown twice: once in the tooltip and once by the browser. To fix this we need to make a slight change to our HTML:
<a href="#" title="This is some information for our tooltip."><span title="More">CSS3 Tooltip</span></a>
What we’ve done here is is wrap the link text in a span tag with its own title attribute. Now the browser will display the title set in the span tag when the link is hovered over.
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: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}We are using a few border hacks here to create the effect of an arrow: setting the border colors on the left and right to transparent and controlling the border widths. We’ve also positioned the arrow so it sits on the bottom of the tooltip box.
And there you have it, a simple tooltip with the title tag of the element hovered over. You could also use this for image alt tags, or even just put your own text into the CSS to pop up where you want.
You can view a working demo here.
How do you build tooltips? Have you used this technique on a site? Let us know in the comments.
Featured image/thumbnail, hint image via Shutterstock.
A Closer Look at WordPress 6.7: “Rollins”
The WordPress 6.7 release, named “Rollins” honors jazz legend Sonny Rollins, renowned for his improvisational mastery and innovative contributions to jazz. His iconic compositions, like “St. Thomas” and “Oleo,” reflect…
Why Responsive Design is Failing Modern Users
Yet, despite its widespread adoption, modern users are increasingly frustrated. Why? Because the once-revolutionary approach is failing to keep up with the evolving demands of today’s digital landscape. In this…
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user engagement: the HTML title tag. Often overlooked, this small…
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG of CO2 annually. Reducing your website’s carbon footprint is…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an experienced freelancer, a team of hardened developers, or a…
Rock Solid WordPress Security: Keeping Your Business Safe
WordPress is the web’s favourite CMS (content management system), renowned for its low-entry level and vast array of themes and plugins. WordPress’s open-source nature allows for endless flexibility, catering to…