Page Widget How to - Create CSS3 Tooltips using the data-attribute

Question

We would like to know how to create CSS3 Tooltips using the data-attribute.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
span {<!--from   ww w . ja v  a  2s.  c  o  m-->
  display: inline-block;
  margin: 3px 2px;
  width: 35px;
  height: 35px;
  text-indent: -9999px;
  position: relative;
  background: #888;
  cursor: help;
}

span:hover:before {
  content: attr(data-tip);
  color: #fff;
  position: absolute;
  z-index: 999;
  white-space: nowrap;
  bottom: 39px;
  left: 17px;
  background: #000;
  border-radius: 12px 12px 12px 12px;
  padding: 0px 7px;
  height: 24px;
  text-indent: 0;
}
</style>
</head>
<body>
  <br style="margin: 0 0 40px;">
  <span data-tip="http://java2s.com"></span>
</body>
</html>

The code above is rendered as follows: