Page Widget How to - Create Pure CSS Hover Tooltip

Question

We would like to know how to create Pure CSS Hover Tooltip.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
[title] {<!--from  ww  w. j  av  a2  s . c  om-->
  color: blue;
  position: relative;
  text-decoration: underline;
  cursor: pointer;
}

[title]:hover:after {
  content: attr(title);
  display: block;
  position: absolute;
  top: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
  width: 80px;
  padding: 10px;
  border-radius: 5px;
}
</style>
</head>
<body>
  Lorem ipsum dolor sit amet,
  <span title="Lorem ipsum">consectetur</span> adipisicing elit, sed do
  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
  ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
  sint occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum.
</body>
</html>

The code above is rendered as follows: