ExamplesEdit

by Lazaro Contreras

HTML

<br><br>
<!--Tooltip top-->
<button tooltip-t="Tooltip top">Tooltip top</button>
<!--Tooltip bottom-->
<button tooltip-b="Tooltip bottom">Tooltip bottom</button>
<!--Tooltip left-->
<button tooltip-l="Tooltip left">Tooltip left</button>
<!--Tooltip right-->
<button tooltip-r="Tooltip right">Tooltip right</button>

CSS

*{
  position: relative;
}
[tooltip-t]::before, [tooltip-b]::before, [tooltip-l]::before, [tooltip-r]::before {
  position: absolute;
  display: none;
  padding: 4px;
  background: #333;
  border-radius: 2px;
  color: white;
  white-space: nowrap;
  z-index: 1000;
}
[tooltip-t]::before{
  bottom: 100%;
  left: 2px;
  margin-bottom: 5px;
  content: attr(tooltip-t);
}
[tooltip-b]::before{
  top: 100%;
  left: 2px;
  margin-top: 5px;
  content: attr(tooltip-b);
}
[tooltip-l]::before{
  top: -2px;
  left: 100%;
  margin-left: 5px;
  content: attr(tooltip-l);
}
[tooltip-r]::before{
  top: -2px;
  right: 100%;
  margin-right: 5px;
  content: attr(tooltip-r);
}
[tooltip-t]:hover::before, [tooltip-b]:hover::before, [tooltip-l]:hover::before, [tooltip-r]:hover::before{
  display: block;
}