- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
Tooltip “easyTooltip”
noviembre 15, 2010
Este es un script Tooltip que utiliza plug-in easyTooltip.
Por defecto este plugin lee el atributo del título de elemento y lo convierte en fade-in tooltip que se puede cambiar de forma que desea. Nota importante: no tiene que ser una etiqueta de ancla (anchor tag). Puede aplicar este script a cualquier elemento(s) que necesita.
Lo que hace esta versión diferente de la primera versión es que ahora se le permite poner contenido personalizado, cualquier contenido HTML – imágenes, párrafos, listas de enlaces … cualquier cosa. Si no le gusta escribir código HTML dentro de una variable de JavaScript, este plugin le permite usar código HTML interno de cualquier elemento de la página. Esto significa que Usted puede escribir el código HTML directamente en la página, como lo hace habitualmente, ocultar ese elemento con CSS y hacer que aparezca como tooltip. Revise demos para obtener más información
JavaScript
Para que el script funcione, el fichero index-#.html con slider debe contener estas líneas de código HTML para incluir el script easyTooltip.js y jQuery framework:
La sección <head> del fichero index-#.html contiene estas líneas de código que inicializan la funcionalidad de script con los valores básicos:
Por defecto, tooltip es añadido a los enlaces (etiquetas <a>) con clase .tooltips que son colocados junto con un elemento (etiqueta <ul> ) con clase .work-list. Aquí Usted puede agregar atributos de script para definir los siguientes valores:
• xOffset – offset (desplazamiento) a la izquierda del cursor (en píxeles). La configuración predeterminada es 10;
• yOffset – offset (desplazamiento) a la parte superior del cursor (en píxeles). La configuración predeterminada es 25;
• tooltipId – puede utilizar esta opción si desea asignar id personalizado a su tooltip. Además, si Usted tiene múltiples tooltips en una página y desea aplicar un estilo diferente, utilice IDs para asignar diferentes definiciones css. La configuración predeterminada es easyTooltip;
• clickRemove – por defecto tooltip desaparece si mueve cursor del elemento. Con la ayuda de esta opción Usted puede eliminar tooltip al hacer clic en el elemento. Configuración por defecto para esta opción es false;
• content – por defecto Easy Tooltip muestra el atributo title de elemento. Utilice esta opción para enviar un contenido personalizado a tooltip. Configuración por defecto es “” (empty/vacío);
• useElement – si Usted desea mostrar HTML más complejo en su tooltip pero odia escribirlo dentro de la opción content, se puede usar HTML interior de un cierto elemento.
HTML
Ahora se puede revisar una representación general de script HTML:
La parte HTML está representada por una lista con viñetas. El script obtiene el contenido del atributo title y cree tooltip de lo.
CSS
Usted puede encontrar stylesheet relacionado con script en el fichero style.css principal. Usted tendrá que modificar los siguientes estilos:
Aquí estilos de #easyTooltip definen la apariencia de tooltip.
