Hay veces en que no vale la pena utilizar javascript o scripts muy concretos para funciones básicas de una web. Con una línea de html y cuatro o cinco de css, es posible crear un tooltip, que en más de una ocasión nos será más que suficiente.

Es línea de código html es más que suficiente para crear nuestro tooltip básico

<a href="#" class="tip">enlace<span>Este es el tip.
Se puede añadir <strong>html</strong>, aunque no
<u>conviene</u> <i>abusar mucho</i> de él</span></a>

Nuestro objetivo es ocultar el <span> dentro del enlace y mostrarlo al pasar el ratón por encima del mismo.

a.tip {
   position:relative;
   color: #006699;
   text-decoration:underline;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 11px;
}
a.tip:hover {
   color: #cc0000;
   text-decoration:underline;
}
   a.tip span {
      position:absolute;
      display: none;
      left: 0px;
      top: 10px;
      width: 180px;
      height: auto;
      padding: 10px;
      padding-top: 20px;
      color: #003366;
      background: url(tip.gif) left top no-repeat;
      border-bottom: 1px solid #006699;
      cursor: default;
   }
   a.tip:hover span {
      position:relative;
      display: block;
      padding: 0;
      margin:0;
      background: none;
      border: 0px none;
      cursor: default;
   }

   a.tip_demo span span, a.tip_demo:hover span span {
      position:relative;
      display: inline;
      left: auto;
      top: auto;
      width: auto;
      height: auto;
      padding: 0;
      color: #000;
      background: none;
      border: 0px none;
      cursor: default;
   }

[ descargar imagen de fondo del css ]

Ejemplo del tooltip

En este texto podemos encontrar Enlaces con tooltips ocultos que además soportan el uso de los tag más frecuentesnegrita, cursiva, texto con color y hasta imágenes si nos trabajamos bien el css