Hacer Tooltips con css3 paso a paso

Las tooltips se utilizan cuando queremos dar una explicación más amplia de un hecho o queremos añadir un texto sin alterar el texto principal.

La mejor forma de hacerlo es utilizando una tooltip.

Porque tooltip y no el atributo title?

Como muchos sabréis en HTML disponemos del atributo title que nos provee con una pequeña tooltip explicativa.
Sin embargo, este atributo no nos permite darle un estilo propio y no podemos usar unos buenos efectos.

Un ejemplo de una tooltip son las que estamos utilizando en skamasle, como Tooltip de muestra de Skamasle.esta sin embargo, hay muchísimos estilos que se pueden crear dependiendo de nuestra web.

Si aún os estáis preguntando para que queréis una tooltip solo puedo decirles que las tooltips mejoran la usabilidad de la página, dando un mayor confort con vuestra página.

Manos a la obra entonces

Las técnicas que necesitaremos conocer son bastantes simples y las hemos estado usando en en otros artículos.

Se resumen en:

  • Gradients
  • Text-shadows
  • Pseudo-elements

Estructura html

La estructura html básica que usaremos es la siguiente:

<a href="#" class="tooltip">
  your text
  <span>Your tooltip description</span>
</a>

Usamos un link por razones de compatibilidad con IE6.
También podemos evitar los links usando:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
  $(function() {
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {
      $('.tooltip').mouseover(function(){
            $(this).children('span').show();
          }).mouseout(function(){
            $(this).children('span').hide();
          })
    }
  });
</script>

El CSS

.tooltip
{
  position: relative;
  background: #eaeaea;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}

.tooltip span
{
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 0;
}

.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}

El css es bastante simple.
Solo le damos un formato a la palabra con tooltip, luego escondemos el span y le damos formato, y en la accion :hover lo mostramos.

En la demo no voy a colgar este formato sino que voy a subir los de Apuntes para que vean otra forma de hacerlos.


Demo OnlineClic para ver la demo! Archivos EjemploDescargate el ejemplo!


Así nos han encontrado!

  • tooltip css3
  • css3 tooltip
  • tooltip css 3
  • tooltips css3
  • tooltips css 3

10 Responses to Hacer Tooltips con css3 paso a paso

  1. admin dice:

    Muy bueno y bastante sencillo..

    Dices que usas url para compatibilidad con IE6.. y como puedo hacerlo sin la url o sea si no me importa la compatibilidad con IE6

    your text
    Your tooltip description

    Así ? o en un div ?

  2. admin dice:

    Ah, no se ve el code.. pero bueno lo hice con < p > en vez de url xd

  3. Nax dice:

    cualquier etiqueta vale.

    solo aplicale la class .tooltip

  4. Muy bueno me ha servido de mucho, lo implementare en algún proyecto.

  5. Carolina dice:

    Por todos los cielos!!! Gracias, llevo todo el fin de semana dándome golpes con el javascript, pero con tu código en 5 minutos ya tenía la descripción de la img con un lindo formato…. me haré asidua de este blog.

  6. Nax dice:

    No hay de que.

    Como siempre si tienes algún problema en específico puedes comentarlo y cuando haga un hueco lo resuelvo en un post.

    Estos meses estoy “de vacaciones” ya que no dispongo de demasiado tiempo para escribir.

    A ver si más adelante saco algo nuevo.

    saludos!

  7. Jose Ignacio dice:

    Creo que hasta el momento no existe dar estilos con css 3 a una etiqueta en HTML, pero los plugins nos sirven bastantes, saludos, seria mejor si dices Crear Tooltip con CSS3 y plugin o algo asi…

    • Nax dice:

      Me alegra anunciarte de que no es así.

      Puedes aplicar estilos css3 a cualquier etiqueta … y te funcionará en la mayoria de navegadores (sin contar IE).

      Como mucho tendrás que tener cuidado y utilizar -moz -o y -webkit para mantener la compatibilidad con versiones antiguas.

      Pero funcionar, funciona. Y te lo digo yo que ahora estoy trabajando en 4 webs y todas llevan css3 sin ningún tipo de plugin ;)

  8. Tobal dice:

    Buuaaahhh 5 minutos y hecho, brutal!!!

    Gachiassss!!!!!!!!! :-) :-)

  9. marina dice:

    Hola
    Yo tengo una duda
    quiero hacer esto mismo con un botón Añadir al Carrito, lo he intentado pero no sé como hacerlo.

    La extensión del archivo es *.tpl y las líneas donde aparece el botón añadir el carrito es:

    {l s=’View’}

    getPageLink(‘cart’, true, NULL, “qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add”)}” rel=”ajax_id_product_{$accessory.id_product|intval}” title=”{l s=’Add to cart’}”>{l s=’Add to cart’}

    ¿POdrías echarme un cable, por favor?
    Muchas gracias y saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">