CSS Tool tips (Infotips) to Support Your Website Visitors

What are Tool tips?

Tool tips are messages that appear when you hover your cursor over a word, hyperlink, image, icon, or any other element in a graphical user interface (GUI) or website.

Also called an “infotip” and sometimes written as “tooltip”, these useful messages appear in a hover box, usually to describe the feature your mouse is hovering over before you click it. Normally, these tool tips only appear on computers using a mouse, as mobile devices mostly do not have a cursor in their GUI.

Here is an example of what a tool tip looks like:

HTML_tooltip
(Image by Nikola Smolenski)

Traditionally, you can use simple HTML to create these tool tips, as in the example above. However, CSS tool tips will elevate the amount of support that you can provide your visitors.

With basic HTML, the tool tips appear automatically with no animations and no positioning. Using CSS, you have control over what they look like, where they’re positioned, and even whether they will have an arrow pointing to the element or not. In the example below, we have programmed the tool tip to appear below the sample text, with a black background, and an arrow pointing up.

hover-example

Basic Tool Tip

As with most CSS tricks, you will need to define things in both the style sheet (external or within the web page) as well as within the body of the web page.

Here is a sample piece of code for a basic tool tip:

<style>

/* Tooltip container */

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black; /* If you want dots under the hoverable text */

}

 

/* Tooltip text */

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

padding: 5px 0;

border-radius: 6px;

 

/* Position the tooltip text - see examples below! */

position: absolute;

z-index: 1;

}

 

/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {

visibility: visible;

}

</style>

 

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

In the above example, there are two parts at play – the HTML part and the CSS part.

For the HTML part, you need to create a container element such as <div> and then add a class to it, in this case we used “tooltip”.

Separately, the tool tip in itself is within an inline element (<span> in this example, with class “tooltiptext”).

For the CSS part, the classes you have specified in HTML are defined here. In this example, the tooltip class uses position:relative (which you can change to position:absolute to define where the tool tip would appear).

We have also used the CSS3 border-radius property to make the corners rounded, creating a nice smooth border.

Lastly, the :hover selector tells the web page to show the tool tip when your mouse hovers over the <div class=”tooltip”>.

Positioning the Tool Tips

It’s easy to move the tool tip’s position using CSS, to the left or right, or to the top and bottom. All you need to do is define them like in the example codes below:

Positioned Right

.tooltip .tooltiptext {

top: -5px;

left: 105%;

}

Positioned Left

.tooltip .tooltiptext {

top: -5px;

right: 105%;

}

Positioned at the Top

Use margin-left by defining half of the tool tip’s width to center the tool tip. In this example, half of 120px is 60, so margin-left is -60px.

.tooltip .tooltiptext {

width: 120px;

bottom: 100%;

left: 50%;

margin-left: -60px;

}

Positioned at the Bottom

You can center the tool tip in the same manner as positioning tool tips at the top.

.tooltip .tooltiptext {

width: 120px;

top: 100%;

left: 50%;

margin-left: -60px;

}

Conclusion

There are many other cool things you can incorporate into a tool tip, all of which draw more attention and improve user experience in a way that basic HTML can’t. Once you learn other elements like borders and animation (using transition and opacity), you’ll be able to make your tool tips even more attractive. So have fun with it and keep learning!

Create Responsive Navigation Bars for Desktop and Mobile Websites

Responsive Menus

With minimalist side design still on the rise, it’s sometimes easy for website visitors to get confused. Navigating a website should be easy and intuitive, and is one of the most important elements of a website. Using CSS, you can turn simple HTML menus into dynamic and aesthetically pleasing navigation bars. Responsive Design As the […]

Read on...

Bookmark These! 3 Great Resources for Free Images

free image resources

For any working and aspiring designers, purchasing stock images and assets are costly, especially when working on your own projects. Ideally we have someone else’s money to play with but we all know that’s not always the case. We have gathered 3 great resources for free images which come in handy when in need of textures […]

Read on...

A Solid Tool for Web Dev – Browser-Sync on a Mac

browsersync

What is Browser-Sync Browser-sync is a tool that helps synchronize your browser with any updates you make to the text file immediately after saving. Once you start coding more often, you get acclimated to adding code, refreshing the browser, and saving the files. Refreshing the browser manually can get laborious and just takes more time […]

Read on...

How to Use CSS3’s Width and Height Properties

This tutorial is for very beginners and people who are brand new to CSS, and it covers two of the most useful and common CSS properties: width and height. In CSS, you use the width and height properties to define (as you can probably guess) the width and height of any element. When we say […]

Read on...

How to Use CSS3’s Right and Left Properties

In CSS, the right and left properties can be used to define the space between the right or the left edge of an element and it’s nearest ancestor. If you’re familiar with the margin property, then it might help you to know that in CSS, the right and left properties can be used much the […]

Read on...

How to Use CSS3’s Letter-Spacing Property

Screen Shot 2017-05-17 at 2.21.38 PM

CSS’s letter-spacing property is one that can be used to, you probably guessed it, add (or remove!) spacing between letters. The property is perfect for either making your letters look super close together, or super spread out. If you have any graphic design knowledge, it’s a little bit like kerning your letters — only there’s […]

Read on...

How to Use CSS3’s Padding Property

Screen Shot 2017-05-17 at 1.35.27 PM

In today’s tutorial we’re going to talk about how to use a super-popular CSS property: padding. You can think of the padding property as a way to add space within your elements — not to be confused with margins, which allow you to add space outside of your elements. Just like with margin though, you […]

Read on...

How to Use CSS3’s Quote Property to Customize Quotations

Did you know that you can customize quotes in CSS? It’s actually a fairly easy and straightforward process. Instead of using the traditional “” quotation marks, you can pretty much use just about any symbol you can think of, and you can easily have this symbol be the uniform quotation mark throughout your website, pages, […]

Read on...

CSS3’s Widows and Orphans Properties

Widows and orphans. These might sound like strange names for CSS properties, and they kind of are. They’re named as such because they come from old-school typography terms referring to, if you can believe it, lines of a paragraph. A widow refers to the last line of a paragraph that didn’t fit on the same […]

Read on...