CSS3 Demo: tooltips

CSS3 tooltip

A nice application of CSS3 is the so called tooltip. Previously, one had to use Javascript, optionally in combination with a jQuery plugin, in order to produce a tooltip. Now you need CSS3 only! However, it may be that you need to provide a fallback for older browsers, that is to say, you could ofcourse simply ignore them unless the tooltip is essential for a good understanding of the content.

Example 1: a CSS3 tooltip

We start by creating a text incorporating a link which we place the HTML attribute data tooltip

The HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>A CSS3 tooltip</title>
<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body id="tooltip">
<p>Lorem ipsum dolor sit amet, <a href="#" data-tooltip="Ik ben een echte CSS tooltip" >
consectetuer adipiscing</a> elit. Duis ligula lorem, consequat eget, tristique nec,
auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
</body>
</html>

Next we place the accompanying CSS

The CSS

#tooltip p{
  color:#666666;
  position:absolute;
  top:30px;
  left:30px;
  margin-right:30px;
  font-family:"Lucida Grande", "Lucida Sans Unicode"
  , "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  line-height:1.5em;
}

#tooltip a:link {
  position: relative;
  text-decoration: none;
  border-bottom:solid  1px;
  color:#f16529;
}

#tooltip a:before {
  content: "";
  position: absolute;
  display: none;
  border-top: 15px solid #f16529;
  border-right: 23px solid transparent;
  border-left:23px solid transparent;
  left: -10px;
  top: -17px;
}

#tooltip a:after {
  content: attr(data-tooltip);
  position:absolute;
  color: white;
  left: -26px;
  top: -42px;
  background:#f16529;
  padding:5px 15px;
  border-radius:10px;
  display: none;
  white-space:nowrap;
  font-size:12px;
}
  
#tooltip a:hover:after, #tooltip a:hover:before{
  display:block;
}
Een CSS# tooltip
Image 1. A CSS3 tooltip.

Example2: another CSS3 tooltip

In this example we slightly adjust the style of the tooltip by applying a gradient fill and a border.

The HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Een CSS3 tooltip</title>
<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body id="tooltip2"><p>Lorem ipsum dolor sit amet, <a href="#" data-tooltip="Tootoodelootoo" >
toodeloo</a> elit. Duis ligula lorem, consequat eget, tristique nec,
auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.</p>
</body>
</html>

Next we place the accompanying CSS.

The CSS

#tooltip2 p{
  color:#666666;
  position:absolute;
  top:30px;
  left:30px;
  margin-right:30px;
  font-family:"Lucida Grande", "Lucida Sans Unicode"
  , "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  line-height:1.5em;
}
#tooltip2 a:link {
  position: relative;
  text-decoration: none;
  border-bottom:solid  1px;
  color:#000;
}
#tooltip2 a:before {
  content: "";
  position: absolute;
  display: none;
  border-top: 15px solid #aaa;
  border-right: 23px solid transparent;
  border-left:23px solid transparent;
  left: -10px;
  top: -15px;
}
#tooltip2 a:after {
  content: attr(data-tooltip);
  position:absolute;
  color: #666;;
  left: -26px;
  top: -42px;
  background:#f16529;
  padding:5px 15px;
  display: none;
  white-space:nowrap;
  font-size:12px;
  background-color: rgb(240,240,240);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(245,245,245)), to(rgb(235,235,235)));
  background-image: -moz-linear-gradient(top,  rgb(245,245,245),  rgb(235,235,235));
  border: 1px solid rgb(210,210,210);
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 1px 0px rgb(252,252,252), 1px 1px 3px rgb(240,240,240), -1px 0px 3px rgb(240,240,240);
  -moz-box-shadow: inset 0px 1px 0px rgb(252,252,252), 1px 1px 3px rgb(240,240,240), -1px 0px 3px rgb(240,240,240);
  -o-box-shadow: inset 0px 1px 0px rgb(252,252,252), 1px 1px 3px rgb(240,240,240), -1px 0px 3px rgb(240,240,240);
  box-shadow: inset 0px 1px 0px rgb(252,252,252), 1px 1px 3px rgb(240,240,240), -1px 0px 3px rgb(240,240,240);
}
#tooltip2 a:hover:after, #tooltip a:hover:before{
  display:block;
}
Een CSS# tooltip
Image 2. Another CSS3 tooltip.

Leave a comment