La plataforma Futudownloads está en desarrollo.

9 may. 2012

Truco: Tooltips en Blogger con CSS3

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.
  • 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.
Texto centrado
Ejemplo del texto que tendra el tooltip

<center rel="tooltip" title="texto del tooltip">Texto Que tendra el tooltip</center>


Enlace
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>


Imagen

<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