21 de enero de 2017

Tutorial: Personalizar y crear Tooltips (Descripción emergente)

Los tooltips son unas pequeñas descripciones emergentes que se muestran cuando se pasa el cursor del ratón encima de un componente con el atributo title. Son muy prácticas para suministrar una información adicional, de ahí la palabra Tooltips, la cuál puede ser traducida como "Herramienta de sugerencia".
   En HTML es fácil crear un tooltip. El atributo title es válido para todos los elementos HTML, por lo cual se puede poner un tooltip a absolutamente todo.

Crear Tooltips


En Texto

  • Ejemplo: Soy un <SPAN title="Soy un tooltip">ejemplo</SPAN> de tooltip.
Resultado:↓↓↓
La etiqueta con el texto “Soy un tooltip” emerge porque, durante unos instantes, dejé el cursor parado encima del contenido del elemento SPAN, o sea en “ejemplo”.


En Imágenes 

  • Ejemplo: <a href="enlace" target="_blank"><img border="0" height="200" src="url-de-la-imagen" title="Enamorate de Pierce Brown" width="200" /></a>
Resultado:↓↓↓
La etiqueta con el texto “Enamorate de Pierce Brown” emerge porque, durante unos instantes, dejé el cursor parado encima de la imagen.
  • El atributo title va luego del cierre de el url de la imagen src="url-de-la-imagen" title="lo que quieras"

En Enlaces

  • Ejemplo: Tooltip en un <a href="url-del-enlace" title="Soy un tooltip">enlace</a>
El texto “Soy un tooltip” emerge, durante unos instantes cuando coloco el cursor encima del enlace.
   En blogger muchas cosas tienen tooltip que son generados automáticamente o porque son agregados en el código de la plantilla.
   Los botones de compartir en redes sociales y los saltos de línea son un ejemplo perfecto.

Personalizar los Tooltips

Si no te gusta el aspecto original de los tooltips (cuadro gris) con CSS es muy fácil cambiarlo a nuestro gusto.

El Scrip

  1. Dirígete a: PlantillaEditar HTML →  busca la etiqueta </head>.
  2. Pega debajo de </head> lo siguiente:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>

El CSS

  1. Dirígete a: Plantilla → Editar HTML →  busca la etiqueta ]]></b:skin>.
  2. Pega encima de ]]></b:skin> los atributos correspondientes.
.tooltip{
display: inline;
position: relative;
}
#s-m-t-tooltip {
min-width:70px; /*the smallest the tooltip can be*/
max-width:300px; /*the biggest the tooltip can be*/
background: #000;
font-size: 10px;
line-height: 13px;
box-shadow:inset 0px 0px 2px 2px #E6EEFF;
font-family: Arial;
letter-spacing: 1px;
color: #fff;
text-align: center;
padding: 3px 4px 3px 6px;
display: block;
z-index: 100;
position: absolute;
margin-left:10px;
margin-top:16px;
}
   En #s-m-t-tooltip es que va todo el aspecto:
  • min-width:70px; y max-width:300px; Lo más pequeño  lo más grande que el Tooltip puede ser.
  • background: #000; Fondo de Tooltips
  • font-size: 10px; Tamaño de la fuente.
  • box-shadow:inset 0px 0px 2px 2px #E6EEFF; Sombra del Tooltip.
  • font-family: Arial; Fuente del texto.
  • letter-spacing: 1px; Espacio entre las letras.
  • color: #fff; Color del texto.
Puedes modificar todo, pero te recomiendo que tengas especial cuidado con:
  • line-height: 13px;
  • padding: 3px 4px 3px 6px;
  • display: block;
  • z-index: 100;
  • position: absolute;
  • margin-left:10px;
  • margin-top:16px;

Feebies

La personalización de los Tooltips puede ser muy fastidiosa, así que aquí les traigo unos diseños que he realizado con más atributos. Los pueden utilizar en su blog y el único cambio que le harían es el de la fuente de letras y los colores






Y este es el tutorial de hoy. Espero les guste y les ayude mucho.
Hasta la próxima...

Les envió muchos besos. Si quieren un tutorial en especifico solo pídanlo en los comentarios o llenen ESTE FORMULARIO...

No hay comentarios:

Publicar un comentario