:: CP - Recursos Web :: - Simple Tooltip

Simple Tooltip

EJEMPLO

Por un tema de una mejor visualización del ejemplo, este será en una pagina externa a esta. La cual es administrada exclusivamente por nosotros.

CLICK AQUI PARA VER EJEMPLO

[ SABER MÁS DE ESTO? ]

INFORMACIÓN

Nombre: Simple Tooltip

Fecha: 2013-08-09

Creditos: Seballero.com

Recurso para:

Garantia: SI?

Descripción:

Este es un recurso que permitirá desplegar una cuadro de descripción a tus enlaces así podrás explicar o describir lo que abrirían tus usuario, son dos ejemplos, el primero que es estático y el segundo que sigue a medida que mueves el cursor.

- Codigo 01: Por encima de la pagina o extra head:

<style>
a {display: inline-block;position: relative;margin: 10px 0;background: #c0df71;color: #fff;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;border-radius:10px;text-decoration: none;padding: 10px;}
.tooltip{position: absolute;background: #c0df71;color: #fff;border-radius:10px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;padding: 10px;margin-top: -10px;
margin-left: 10px;z-index: 3;display: none;background-color: #ff934f;}
.tooltip-seg{position: absolute;background: #c0df71;color:#fff;
border-radius:10px;font-family: "Lucida Grande", Lucida, Verdana, sans-serif;padding: 10px;
margin-top: -10px;margin-left: 30px;z-index: 3;display: none;background-color: #ff934f;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
            $(document).ready(function() {			
					  $("#tooltip1").mouseover(function(){
						 eleOffset = $(this).offset(); 
						$(this).next().fadeIn("fast").css({					
									left: eleOffset.left + $(this).outerWidth(),
									top: eleOffset.top
								});
						}).mouseout(function(){
							$(this).next().hide();
						});
						$("#tooltip2").mouseover(function(){
							$("#tooltip2").mousemove(function(e){
								 $(this).next().css({left : e.pageX , top: e.pageY});
							  });
							eleOffset = $(this).offset();
							$(this).next().fadeIn("fast").css({
									left: eleOffset.left + $(this).outerWidth(),
									top: eleOffset.top
								});
						}).mouseout(function(){
							$(this).next().fadeOut("fast");
						});});		
        </script>

Copiar codigo