Tooltips Me by Click
Existen muchos plugins interesantes para crear tooltips como por ejemplo qTip o ClueTip entre otros. En este artículo vamos a ver una forma sencilla de conseguir el efecto de estos plugins sin necesidad de utilizarlos.
En el caso concreto del ejemplo que vamos a ilustrar tenemos un tooltip que se visualiza al hacer click en el elemento html que contiene el tooltip. En definitiva vamos a tener un link que al pulsarlo nos va a visualizar el contenido HTML del tooltip y al pulsarlo de nuevo o pulsando en cualquier parte de la página el tooltip se esconderá.
Dentro de la cabecera de la página incluimos la librería jQuery y el script que se encarga de mostrar y ocultar el tooltip o contenedor.
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.example').click(function(){
var parent = $(this).parent().attr('id');
if ($('.tooltip_example').is (':hidden'))
$('.tooltip_example').show();
else
$('.tooltip_example').hide();
return false;
});
$('body,html').click(function(){
$('.tooltip_example').hide();
});
});
</script>
Fíjate que tan solo estamos esperando a que se pulse en el link que dispone de tooltip para mostrar u ocultarlo según su estado actual. Es decir, si está oculto se mostrará y si no está visible se visualizará. Además indicamos que cuando se pulse en cualquier parte de la página lo ocultamos también.
Dentro del <body> tendremos nuestro link que abrirá y cerrará el tooltip:
<a href="#" class="example">Click me to see an example</a>
Ahora solo nos falta añadir nuestro contenedor que hará de tooltip:
<div class="tooltip_example"> <h2>Contenido del tooltip</h2> <!--YOUR CONTENT TOOLTIP--> </div>
También será importante añadir los estilos necesarios:
.tooltip_example {
width:500px;
display:none;
background: #FFFFFF;
border:3px solid #dadada;
padding:10px;
position: absolute;
top: 110px;
word-wrap:break-word;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}
.tooltip_example:after{
content:'';
display:block;
position:absolute;
top:-20px;
left:30px;
width:0;
height:0;
border-color: transparent transparent #dadada transparent;
border-style: solid;
border-width: 10px;
}
Los estilos del tooltip son modificables muy fácilmente editando los estilos.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
saben como pudo modificar el atributo de left para el div…gracias
Me funciona perfecto! como puedo hacer este ejercicio para varios tooltips? ya que cuando hago el click me muestra el contenido de todos los tips.
Cuando tienes varios debes plantearlo con el identificador del elemento. A los enlaces le tendrás que añadir un identificador y luego en el div del tooltip también para poder hacer referencia al div que toca abrirse.