Lo que se está viendo ahora es que los sitios web se estan actualizando a CSS3 y HTML5.
y este es un Plugin de Jquery.
Mobile Fryendly Tooltip CSS3
Se llama de esa forma porque tambien es visible en dispositivos mobiles como Smarth Phones, Tablets y iPads.
Texto centrado
Ejemplo del texto que tendra el tooltip
Enlace
Ejemplo Enlace derecho _ Ejemplo Texto del enlace _ Ejemplo de la izquierda
Imagen
FUENTE | osvaldas.info
y este es un Plugin de Jquery.
Mobile Fryendly Tooltip CSS3
Se llama de esa forma porque tambien es visible en dispositivos mobiles como Smarth Phones, Tablets y iPads.
- Ve a Plantilla, luego das click en Edicion de HTML.
- Has click en Expandir plantilla de artugios y antes de ]]></b:skin> pega lo siguiente.
/* Mobile Friendly Tooltip */
#tooltip {
font-family: Ubuntu, sans-serif;
font-size: 0.875em;
text-align: center;
text-shadow: 0 1px rgba( 0, 0, 0, .5 );
line-height: 1.5;
color: #fff;
background: #333;
background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid #fff;
-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
-moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
position: absolute;
z-index: 100;
padding: 15px;
}
#tooltip:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
border-top-color: rgba( 0, 0, 0, .7 );
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}
#tooltip.top:after {
border-top-color: transparent;
border-bottom: 10px solid #333;
border-bottom-color: rgba( 0, 0, 0, .6 );
top: -20px;
bottom: auto;
}
#tooltip.left:after {
left: 10px;
margin: 0;
}
#tooltip.right:after {
right: 10px;
left: auto;
margin: 0;
}
- Luego busca </head> y justo encima pega lo siguiente.
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/jquery-1.7.2.min.js'/>
<!--[if lt IE 9]>
<script src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/selectivizr.js"></script>
<script src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/html5.js"></script>
<script src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/ie9.js"></script>
<![endif]-->
<script type='text/javascript'>
// IJ tutorials//<![CDATA[
$( document ).ready( function()
{
var targets = $( '[rel~=tooltip]' ),
target = false,
tooltip = false,
title = false;
targets.bind( 'mouseenter', function()
{
target = $( this );
tip = target.attr( 'title' );
tooltip = $( '<div id="tooltip"></div>' );
if( !tip || tip == '' )
return false;
target.removeAttr( 'title' );
tooltip.css( 'opacity', 0 )
.html( tip )
.appendTo( 'body' );
var init_tooltip = function()
{
if( $( window ).width() < tooltip.outerWidth() * 1.5 )
tooltip.css( 'max-width', $( window ).width() / 2 );
else
tooltip.css( 'max-width', 340 );
var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
pos_top = target.offset().top - tooltip.outerHeight() - 20;
if( pos_left < 0 )
{
pos_left = target.offset().left + target.outerWidth() / 2 - 20;
tooltip.addClass( 'left' );
}
else
tooltip.removeClass( 'left' );
if( pos_left + tooltip.outerWidth() > $( window ).width() )
{
pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
tooltip.addClass( 'right' );
}
else
tooltip.removeClass( 'right' );
if( pos_top < 0 )
{
var pos_top = target.offset().top + target.outerHeight();
tooltip.addClass( 'top' );
}
else
tooltip.removeClass( 'top' );
tooltip.css( { left: pos_left, top: pos_top } )
.animate( { top: '+=10', opacity: 1 }, 50 );
};
init_tooltip();
$( window ).resize( init_tooltip );
var remove_tooltip = function()
{
tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
{
$( this ).remove();
});
target.attr( 'title', tip );
};
target.bind( 'mouseleave', remove_tooltip );
tooltip.bind( 'click', remove_tooltip );
});
});
//]]>
</script>
- Lo que ves en verde puedes eliminarlo, es un codigo para html5 en IE9.
- Ahora guarda los cambios.
- Ahora cuando vallas a hacer una entrada y quieras poner un texto o una imagen con tooltip haces lo siguiente.
<center rel="tooltip" title="texto del tooltip">Texto Que tendra el tooltip</center>
Ejemplo Enlace derecho _ Ejemplo Texto del enlace _ Ejemplo de la izquierda
<a href="#URL del enlace" rel="tooltip" title="texto del tooltip">Texto del enlace</a>
<img src="URL de la imagen" rel="tooltip" title="texto del tooltip"/>
- Lo que esta en Azul es donde podras el texto que aparecerá en el tip
- Lo que esta en Rojo es donde esta el texto que tendra el tip.
- Lo que está en Purpura es donde vendra el enlace del texto.
- Lo que esta en Fuchsia es donde ira la URL de la imagen.
FUENTE | osvaldas.info