Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum, diam vel varius elementum, felis lacus pharetra leo, sit amet blandit nunc tortor id <a title="Título de este mágico tooltip sólo con CSS3" href="#">tooltip sólo con CSS3</a> risus. Nullam eget tortor sit amet eros malesuada varius eu ac nulla. Phasellus varius sapien quis  magna tempus condimentum. Suspendisse potenti. Nam justo urna, iaculis vel <a title="Tooltip moderno" href="#" class="tooltipmasmejor">convallis vitae</a>, tempus ac nulla. Suspendisse nec ultrices nibh, vitae dictum lacus. Pellentesque auctor tempor neque sagittis rutrum.
body {
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  padding: 50px;
  color: #ccc;
  line-height: 140%;
  font-size: 1em;
}

a[title] {
  color: red;
}
a[title]:hover {
  color: darkred;
  text-decoration: none;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  color: #333;
  position: absolute;
  left: 50%; 
  top: -150%;
  white-space: nowrap; 
  z-index: 10;
  border-radius: 6px;
  background-color: rgba(0,0,0,.7);
  color: white;
  font-size: .7em;
  padding: .1em .5em;
  text-shadow: black 1px 1px 0;
}
a[title]:hover:before {
  position: absolute;
  top: -4px;
  left: 60%;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: rgba(0,0,0,.7) transparent transparent transparent;
}

/* ============ */
a.tooltipmasmejor[title] {
  color: #13DAEC;
  text-decoration: none;
  transition: color .3s ease-in-out;
  display: inline-block;
	overflow: hidden;
	vertical-align: top;
	perspective: 400px;
	perspective-origin: 50% 50%;
}
a.tooltipmasmejor[title]:hover {
  color: #71e9f4;
  text-shadow: none;
  border: none;
  background: none;
  text-shadow: none;
}
a.tooltipmasmejor[title] span {
	display: block;
	position: relative;
	padding: 0 2px;
	pointer-events: none;
	transition: all 400ms ease;
	transform-origin: 50% 0%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}
a.tooltipmasmejor[title]:hover span {
	background: rgba(0,0,0,0.5);
	transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
}
a.tooltipmasmejor[title] span:after {
	content: attr(title);
	position: absolute;
  color: white;
  background: #0d99a5;
  font-size: .7em;
  width: 100%;
  text-shadow: black 1px 1px 0;
  text-align: center;
	left: 0;
	top: 0;
	padding: 0 2px;
	transform-origin: 50% 0%;
	transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
}
a.tooltipmasmejor[title]:before {
  display: none;
}
var $titulo = $('.tooltipmasmejor').attr('title');
$('.tooltipmasmejor').wrapInner('<span title="'+$titulo+'">');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js