black balloon tips on hover

by katalin_2003

HTML

<p>Hover the links on below to see the tooltips in action.</p>

<p>If you like this script, you can also check my <a href="boonedam.fr" data-title="katalin_2003">personal wesbite</a>, <a href="http://personalwebsite.com" target="_blank" data-title="Acid.JS Web.UI">Acid.JS Web.UI</a>, <a href="http://website.com" target="_blank" data-title="Balloon tip">my blog</a> or follow me on <a href="https://twitter.com/#!/katalin_2003" target="_blank" data-title="Follow me on Twitter for daily cool stuff.">Twitter</a>

</p>

CSS

/* the tooltip will be applied to any element, containing data-title attribute */
[data-title] {
  position: relative;
  padding: 0;
}

[data-title]::before,
[data-title]::after {
  position: absolute;
  left: 50%;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  background: #000;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.8);
  -moz-transition: opacity 200ms 50ms linear;
  -webkit-transition: opacity 200ms 50ms linear;
  -ms-transition: opacity 200ms 50ms linear;
  -o-transition: opacity 200ms 50ms linear;
  transition: opacity 200ms 50ms linear;
}

/* the tooltip */
[data-title]::before {
  content: attr(data-title);
  width: 120px;
  padding: 4px;
  margin: 30px 0 0 -68px;
  font: normal 11px/16px Arial, Sans-serif;
  color: #fff;
  cursor: default;
  border-radius: 4px;
}

/* the pointer */
[data-title]::after {
  content: "";
  width: 8px;
  height: 8px;
  margin: 26px 0 0 -6px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

[data-title]:hover::before,
[data-title]:hover::after {
  opacity: 1;
  visibility: visible;
}