En vista de que ya vimos como añadir Tooltip en Blogger con JQuery y luego experimentamos una forma más sencilla de lograrlo utilizando Javascript en este artículo vamos añadir una gran experiencia de usuario a tu sitio móvil, aquí te explicamos cómo diseñarlos.
- [message]
- ##edit## Características
- Es responsive: Se basa en un valor máximo de ancho cuando se ve en las pantallas grandes, adopta para reducir entornos y recoge la mejor posición relativamente visible al objetivo (arriba, abajo, izquierda, centro, derecha).
Es para dispositivos móviles: Adaptado para dispositivos móviles
CSS
Para empezar, vamos a construir el aspecto de nuestra descripción. No hay un estilo de lujo, sólo las principales propiedades para que pueda ver con claridad cómo funciona.[ #tooltip { text-align: center; color: #fff; background: #111; position: absolute; z-index: 100; padding: 15px; } #tooltip:after /* triangle decoration */ { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #111; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; } #tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #111; top: -20px; bottom: auto; } #tooltip.left:after { left: 10px; margin: 0; } #tooltip.right:after { right: 10px; left: auto; margin: 0; }]
JavaScript
[ $( 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 ); }); });]
HTML Example
[<abbr title="User Experience" rel="tooltip">UX</abbr>]
- [message]
- ##edit## Implementar
- 1. Ponga el código CSS en cualquier lugar en el archivo CSS existente o crear una nueva. También puede insertar en el archivo HTML en la cabeza , envolviendo el código con <style> y </style>.
2. Poner el código JavaScript en el archivo JS existente o crear uno nuevo. También puede insertar en el archivo HTML en la cabeza o, mejor, el cuerpo envolviendo el código con <script> y </script>.
3. Asignar el atributo rel="tooltip" y title="Aquí la descripción" cualquiera de cuerpo etiquetas en archivo HTML en la que desea la información sobre herramientas para que aparezca cuando se le llama. Ajuste del título (uso <strong>, <em> etc, para distinguir los fragmentos de texto, pero evite block elements).
- [message]
- ##warning## Importante
- Asegúrese de que ya tiene jQuery biblioteca incluido.
