Tooltip CSS3

by Lazaro Contreras

HTML

<br><br>
<button tooltip-t="Tooltip top">Tooltip top</button>
<button tooltip-b="Tooltip bottom">Tooltip bottom</button>
<button tooltip-l="Tooltip left">Tooltip left</button>
<button tooltip-r="Tooltip right">Tooltip right</button>
<br><br>
<a href="#" tooltip-r="JsFiddle">JsFiddle</a>
<br><br>
<span tooltip-r="JsFiddle">JsFiddle</span>
<br><br>
<input type="file" tooltip-b="Selecionar archivo"/>

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: 10px;
  content: attr(tooltip-t);
}

[tooltip-b]::before {
  top: 100%;
  left: 2px;
  margin-top: 10px;
  content: attr(tooltip-b);
}

[tooltip-r]::before {
  top: -3px;
  left: 100%;
  margin-left: 10px;
  content: attr(tooltip-r);
}

[tooltip-l]::before {
  top: -3px;
  right: 100%;
  margin-right: 10px;
  content: attr(tooltip-l);
}

[tooltip-t]::after,
[tooltip-b]::after,
[tooltip-l]::after,
[tooltip-r]::after {
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  content: '';
  background: #333;
  transform: rotate(45deg);
  z-index: 999;
}

[tooltip-t]:after {
  bottom: 100%;
  left: 7.5px;
  margin-bottom: 7px;
}

[tooltip-b]:after {
  top: 100%;
  left: 7.5px;
  margin-top: 7px;
}

[tooltip-r]:after {
  top: 4px;
  left: 100%;
  margin-left: 7px;
}

[tooltip-l]:after {
  top: 4px;
  right: 100%;
  margin-right: 7px;
}

[tooltip-t]:hover::before,
[tooltip-b]:hover::before,
[tooltip-l]:hover::before,
[tooltip-r]:hover::before,
[tooltip-t]:hover::after,
[tooltip-b]:hover::after,
[tooltip-l]:hover::after,
[tooltip-r]:hover::after {
  display: block;
}