Tooltips are boxes with additional information that appear when you hover over a certain element on a webpage. They are a great way to help a user to navigate through an unfamiliar interface, without overwhelming them with too much information. Today we are going to build an HTML and CSS tooltip ourselves.
We’ll be able to use the CSS tooltip on most of the inline elements, such as links, strong tags, spans, italicized text, etc. You would need to apply a few classes to your element, and add a data- attribute with the tooltip text. Let’s get started.
If you want to know a little bit about our subscription service ONE, I’ll give you such an opportunity. This new subscription can give you a chance to download any items from ONE package for only $19 a whole month! ONE package is the set of items you can get within the subscription, where you can find themes, templates, plugins, etc. Visit the page HTML Templates to see what items are available now. Don’t miss such a great chance. I also want to say that our blog readers can get an opportunity to grab 5% off within the subscription. For this you need to insert the promo code BecomeThe1.
Setting up the document
First off, we need to create an HTML document and set up the initial markup.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tooltips Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Work+Sans:300,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> // content </div> </body> </html>
You can see that I’m linking Normalize.css, which helps reset all the default browser styles, and ensures that each element looks the same in every browser. Unlike a standard CSS reset, Normalize.css doesn’t remove all default styles, so you won’t need to rewrite style of each element from scratch.
I created a div with a class of container where we’re going to put our main tooltip examples. Here are the styles for the body and .container class:
body { font-family: 'Work Sans', sans-serif; font-size: 1.5em; line-height: 1.4em; font-weight: 700; background-color: #28ABE3; color: #fff; } .container { width: 800px; margin: 100px auto; background: radial-gradient(circle farthest-corner at 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%); }
I centered the container div by assigning auto to margin-left and margin-right. I also added some styles to the body, such as the font properties and colors to make it look good.
I decided to add a little bit of light CSS gradient to the background. If a certain browser doesn’t support CSS gradients (this concerns mostly IE 8 and 9), the background color will gracefully fall back to the default blue, which is the background color of the body.
I’ll be using tooltips with anchor tags, but you can assign the classes to other inline elements such as strong tags or spans. Here’s the content of our container div:
<ul class="tooltip-wrapper"> <li><a href="#" class="tooltip tooltip-top" data-tooltip="Hey, I'm at the top!">Tooltip top</a></li> <li><a href="#" class="tooltip tooltip-bottom" data-tooltip="And I'm at the bottom">Tooltip bottom</a></li> <li><a href="#" class="tooltip tooltip-left" data-tooltip="I'm left all alone">Tooltip left</a></li> <li><a href="#" class="tooltip tooltip-right" data-tooltip="You're wrong and I'm right">Tooltip right</a></li> </ul>
The unordered list contains four list items with anchor tags. I styled the list items so that they don’t contain bullet points, and are displayed as an inline-block, which will help us to add some margin between them.
.tooltip-wrapper { padding: 160px 0; text-align: center; } .tooltip-wrapper li { list-style: none; display: inline-block; margin: 0 10px; } .tooltip-wrapper li a { color: #fff; text-decoration: none; }
Let’s take a closer look at the anchor tag:
<a href="#" class="tooltip tooltip-left" data-tooltip="I'm left all alone">Tooltip left</a>
I assigned two classes to the links. The first .tooltip class will be responsible for the main body of a tooltip, while the second class will manage its placement.
You will also notice a custom data- attribute which holds the content of our tooltip. It will come in handy later, when we’ll be building the tooltip class.
Creating the .tooltip class
Here is the code for our main .tooltip class.
.tooltip { position: relative; } .tooltip:after { position: absolute; padding: 8px; border: 3px solid #fff; border-radius: 8px; background-color: #1FDA9A; font-size: .9em; font-weight: bold; color: #fff; content: attr(data-tooltip); min-width: 80px; /* width: -moz-max-content; */ /* width: -webkit-max-content; */ opacity: 0; transition: all .2s ease-in-out .25s; visibility: hidden; z-index: 2; } .tooltip:hover:after { opacity: 1; visibility: visible; }
The tooltip itself is an :after pseudo-element, and is positioned absolutely. That’s why we need to assign relative position to the anchor element. I added some basic styling, such as padding, border, font size and weight. However take a closer look at the content property. It has an attr() value that holds our custom data-tooltip, and uses its content to display in our tooltip. Instead of data-tooltip you can go with any other name, just make sure it has data- at the beginning. Find out more about data attributes here.
The tooltip body has a minimum width of 80px. If you’d like the content to be stretched in one single line, you can try adding the value of max-content to the width property, which is now commented out. Note, however, that this is an experimental feature, so you need to use vendor prefixes -webkit- and -moz-.
In order for a tooltip to have a slight slide-in animation effect, we use the transition property. Notice the value of .25s, which is the time of a delay before the tooltip is shown or hidden. In this way it won’t appear if you hover over a text by mistake, and would be visible only if you hover your cursor for more than a moment. I also assigned the opacity to 0 and visibility to hidden. We wouldn’t be able to use display: none; because the element would disappear completely, and we wouldn't see any transition effects. You can see that the opacity and visibility change when we hover over our element.
The result would look like this:
Note: I changed/removed some of the markup and styling in the CodePen demos. For the final result see the demo at the end of this article.
Adding Movement
Now that we have made our tooltip appear/disappear, let’s make it move. We have already assigned the animation property, so the only thing that is left is to declare the starting position from where it should appear, and the destination position.
/*Tooltip starting positions*/ .tooltip-top:after { bottom: 150%; left: 0; } .tooltip-bottom:after { top: 155%; left: 0; } .tooltip-left:after { right: 130%; min-width: 100px; } .tooltip-right:after { left: 130%; min-width: 100px; } /*Tooltip final positions*/ .tooltip-top:hover:after { bottom: 120%; } .tooltip-bottom:hover:after { top: 125%; } .tooltip-left:hover:after { right: 110%; } .tooltip-right:hover:after { left: 110%; }
I decided to add this functionality to additional classes. In this way if you assign for example the class .tooltip-left, your tooltip will appear on the left side of the text, the .tooltip-top would make it appear at the top, etc.
In this demo I’m using the .tooltip-right class. You can play around with it and change the class to another one to see the different positions of the tooltip.
Creating Triangles
The last but not least feature is the small triangles on each of the sides of the tooltip. We’ll create them with the help of :before pseudo class (:after is already taken by the tooltip itself). We’ll assign them to our four position classes and make sure that each of the triangles points to the correct direction.
/** * Triangles */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before { content: ""; display: block; position: absolute; border-width: 7px; border-style: solid; border-color: rgba(0, 0, 0, 0); opacity: 0; transition: all .2s ease-in-out .25s; visibility: hidden; } .tooltip-top:hover:before, .tooltip-bottom:hover:before, .tooltip-left:hover:before, .tooltip-right:hover:before { opacity: 1; visibility: visible; }
The way we create a triangle is by assigning the width to the border, while having no width or height of the element itself. In this case the border width is set to 7px. The border color is completely transparent, which is very important. In the next piece of code I assign color to a respective side of the border, which will make it take the triangle shape.
The rest of the styling looks similar to what we did with the tooltip body. We have the same transitions, the position is absolute, opacity is set to 0, and visibility is hidden.
/*Triangle starter positions*/ .tooltip-top:before { top: -51%; left: 50%; transform: translateX(-50%); border-top-color: #fff; } .tooltip-bottom:before { bottom: -56%; left: 50%; transform: translateX(-50%); border-bottom-color: #fff; } .tooltip-left:before { left: -31%; top: 15%; border-left-color: #fff; } .tooltip-right:before { right: -31%; top: 15%; border-right-color: #fff; } /* Triangle final positions */ .tooltip-top:hover:before { top: -21%; } .tooltip-bottom:hover:before { bottom: -26%; } .tooltip-left:hover:before { left: -11%; } .tooltip-right:hover:before { right: -11%; }
In order to make the triangles move the same way the tooltip moves, we need to assign here the initial and final positions as well.
Here’s how this looks in the result:
As with the previous demo, feel free to change the position classes. The triangle position will be changing correspondingly.
View the final demo to see the tooltips in action.
Final Words
This code can be a good starting point for developing your own tooltips. You can style them to fit into the design of your own blog, as well as change the animation duration and speed. In order to use them just apply the .tooltip and position classes to your element, and set the data-tooltip attribute with your content.
If you want to use tooltips for your website's backend, look through our Bootstrap Admin Themes. Bet, you'll find some great themes to apply it to!