Tooltips in CSS

Quick overview

A useful aid to an application is to have an explanation popup when the mouse is hovered over an item, eg a menu item or URL link. Such a pop up on hover is called a tooltip. This is often done with JavaScript, however it is preferable to do it with CSS as it can be faster and as JavaScript is sometimes (selectively) switched off by those who are wary (or some would say: the paranoid) when surfing the web.

Use of CSS to do tooltips

The basis of the idea change the CSS visibility from hidden to visible when the mouse hovers over the element.

In practice a little more is needed:

• set a background colour and border so that it stands out from whatever is behind it
• also it needs to have z-index set so that it appears over (ie hide) any text that it pops up over
• When it is invisible it will still occupy space on the web page, this will leave an empty hole. Setting position:absolute will fix this.

A simple tooltip implementation. We define a class tooltip_demo to be used when hovering over a link:

/* Hover over tooltip */
.tooltip_demo {
  position:absolute;        /* Ensure that it does not take space on the web page */
  visibility:hidden;        /* Normally it is invisible */
  background-color:yellow;  /* Something that contrasts with the rest of the web page */
  border-color:#000;        /* Black border, 1px wide */
  border-width:1px;
  border-style:solid;
  z-index:12;               /* Ensure that it hides anything that it where it pops up */
}
a:hover + .tooltip_demo {   /* Select for the item (span) that follow a link (<a>) */
                            /* that the mouse is hovering over */
  visibility:visible;       /* Make the text in class tooltip_demo visible */
}

and use it to expand on the meaning of Home, note how following the link (<a>) there is a <span> class tooltip_demo:

<a href='/'>Home</a><span class="tooltip_demo">Go to the Home page</span>

Try this out, move your mouse over the next word: HomeGo to the Home page

Positioning the tooltip

You will have noticed that the above tooltip appeared to the right of the word Home, you might not want it there. You may want to position the tooltips with respect to a containing block.

Example, you have a picture gallery and want tooltips over the left/right arrows that will take viewers to the previous/next images. (Note that the previous/next links below are for illustration & do not work.

The CSS:

/* Positioned tooltips */

.tooltipContainer {
 position:relative;        /* Arrow tooltips relative to this */
 max-width:500px;
 margin:0 auto 0 auto;
 text-align:center;
}
.tooltipContainer img {
 display:block;            /* So that the image tooltip is relative */
 margin:0 auto 0 auto;
}
.tooltipImageArrow {       /* For the arrows */
 font-size:200%;           /* Big enough to see */
 margin: 0;
 float:right;              /* Move to right of containing tooltipContainer */
}
.tooltipImageArrowLeft {
 float:left;               /* Move to left of containing tooltipContainer */
}
.tooltipImageArrow > a {
 text-decoration:none;     /* Stop the arrow being underlined */
}
.tooltipImageCaption {
 font-size:200%;
}

.tooltip_demo_p {          /* Positioned tooltip */
 position:absolute;        /* Ensure that it does not take space on the web page */
 visibility:hidden;        /* Normally it is invisible */
 background-color:yellow;  /* Something that contrasts with the rest of the web page */
 border-color:#000;        /* Black border, 1px wide */
 border-width:1px;
 border-style:solid;
 z-index:12;               /* Ensure that it hides anything that it where it pops up */
 top:+3em;
}
/* Select for the item (span) that follow a link (<a>) that the mouse is hovering over */
a:hover + .tooltip_demo_p, img:hover + .tooltip_demo_p {
 visibility:visible;       /* Make the text in class tooltip_demo & tooltip_demo_p visible */
}

.tooltipr {                /* For the arrow on the RH size, position differently*/
 left:auto;
 right:2em;
}

The HTML to go with that:

<div class="tooltipContainer">
   <span class="tooltipImageArrow tooltipImageArrowLeft"><a href="/DispImage.php?n=0">&lArr;</a>
     <span class="tooltip_demo_p" style="font-size:medium;">View previous image</span></span>
   <span class="tooltipImageCaption">A Mortimer Organ</span>
   <span class="tooltipImageArrow"> <a href="/DispImage.php?n=2">&rArr;</a>
     <span class="tooltip_demo_p tooltipr" style="font-size:medium;">View next image</span></span>
  <br />
  <a href="https://www.stalbansorgantheatre.org.uk/site/collection/mech.html#mortier" target="_blank" >
    <img src="/Images/MortimerOrgan_400x202.jpg" alt="97 key Mortimer 'Four Columns' Organ">
    <span class="tooltip_demo_p" >Click the image to learn more about the Mortimer, opens another tab</span></a>
</div>

This is what it looks like:

Caveats

• This works with devices that have a pointer (mouse). Some do not, eg mobile 'phones, although the popups seem to occasionally appear.
• Opera 12 has format problems with a HTML 4 DOCTYPE but works with HTML 5, so use <!DOCTYPE HTML>

Transition delays

In some situations having popups appear and disappear immediately causes a lot of flashing when the mouse is moved; this may be undesirable, for instance the user is moving the mouse a long distance and happens to pass over the popup but is not interested in it. For instance move your mouse rapidly over the 3 items below:

You can set a delay when the popup appears and when it disappears. You do this by adding transition-property and transition-delay to the class tooltip_demo and also where it is selected by hover

  .tooltip_demo {
   ... all the previous properties
   transition-property:visibility;
   transition-delay:0.2s;
  }
  a:hover + .tooltip_demo {
   visibility:visible;
   transition-property:visibility;
   transition-delay:0.2s;
  }

• transition-property names the property where the transition will be delayed, here it is: visibility
• transition-delay says how long before the property changes, here it is 0.2 seconds.

The second definition above (a:hover ...) defines the delay before the popup appears when the mouse moves over, the first one the delay for it to disappear when the mouse has moved away. These could be different times, but that does not look good.

Try rapidly moving the mouse over the list below (you should not see any popup) and the move it slowly to see them.

This is a simple use of transitions, for more information see: W3C Working Draft 12 February 2013.

Caveat

Transitions are relatively new (as of writing: 2013) and are not supported by all browsers. However if a browser does not understand it, transitions are ignored so nothing is lost.

License and copyright

All description & sample files copyright (c) 2013 Parliament Hill Computers. Author: Alain D D Williams.

You may used these files as the basis your own (or organisation's/company's) project(s) (under whatever licence that you see fit). You may not claim ownership or copyright of any substantially unmodified files. Acknowledgement would be appreciated, but is not necessary.

These demonstrations are made available in the hope that they are useful. There may be errors: there is no warranty at all, use at your own risk.