Foundation - Referencia de JavaScript de información sobre herramientas
Descripción
Foundation proporciona componentes de JavaScript para la información sobre herramientas que se enumeran a continuación.
Inicializando
Para utilizar este complemento, los archivos foundation.core.js , foundation.tooltip.js deben incluirse en su JavaScript. Este complemento requiere las siguientes bibliotecas de utilidades:
foundation.util.box.js
foundation.util.triggers.js
Fundación.Tooltip
Crea una nueva instancia de información sobre herramientas.
var elem = new Foundation.Tooltip(element);Se dispara la Información sobre la herramienta # eventos: init eventos y acepta los siguientes parámetros.
| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 | element Es el objeto jQuery que se usa para adjuntar información sobre herramientas. |
jQuery |
| 2 | options Para ampliar la configuración predeterminada se utiliza este objeto. |
Objeto |
Opciones de complementos
Puede utilizarlos para personalizar una instancia de información sobre herramientas. Se puede establecer como atributos de datos separados, un atributo de opciones de datos combinado o como un objeto pasado al constructor del complemento. La siguiente tabla enumera las opciones de complementos utilizadas en Foundation.
| No Señor. | Nombre y descripción | Ejemplo |
|---|---|---|
| 1 | hoverDelay Representa el tiempo en ms, que debe tomarse antes de que se abra una información sobre herramientas al pasar el mouse. |
200 |
| 2 | fadeInDuration150 Representa el momento de desaparecer a la vista. |
150 |
| 3 | fadeOutDuration Representa el momento de desaparecer de la vista. |
150 |
| 4 | disableHover Inhabilita los eventos de desplazamiento para que no abran la información sobre herramientas cuando se establece en verdadero. |
falso |
| 5 | templateClasses Clases adicionales para aplicar a la plantilla de información sobre herramientas, que es opcional. |
'mi-clase-cool-tip' |
| 6 | tooltipClass Se agregó una clase no opcional a las plantillas de la información sobre herramientas. |
'información sobre herramientas' |
| 7 | triggerClass Clase aplicada al elemento de anclaje de la información sobre herramientas. |
'tiene-propina' |
| 8 | showOn Tamaño mínimo del punto de interrupción en el que abrir la información sobre herramientas. |
'pequeña' |
| 9 | template Plantilla personalizada que se utilizará para crear etiquetas de información sobre herramientas. |
'' |
| 10 | tipText Texto generado en plantilla de información sobre herramientas al abrir. |
'Algún dato interesante sobre el espacio aquí'. |
| 11 | clickOpen Abre la información sobre herramientas cuando se activa con un evento de clic o toque. |
cierto |
| 12 | positionClass Clases adicionales para posicionamiento, establecidas por JS. |
'parte superior' |
| 13 | vOffset Representa la distancia (píxeles) en la que la plantilla debe empujar desde el ancla en el eje Y. |
10 |
| 14 | hOffset Representa la distancia (píxeles) en la que la plantilla debe empujar desde el ancla en el eje X, cuando se alinea hacia un lado. |
12 |
Eventos
Estos eventos se activarán desde cualquier elemento con el complemento de información sobre herramientas adjunto. La siguiente tabla enumera los eventos con una breve descripción.
| No Señor. | Nombre y descripción |
|---|---|
| 1 | tooltip.zf.tooltips Desencadenadores para cerrar todas las demás descripciones emergentes que se abren en la página. |
| 2 | show.zf.tooltips Se activa cuando se muestra información sobre herramientas. |
| 3 | hide.zf.tooltips Se activa cuando la información sobre herramientas está oculta. |
Funciones
.show
Revela la información sobre herramientas y desencadena un evento para cerrar otra información sobre herramientas. Se dispara el # evento Closeme: Tooltip # evento: Mostrar eventos.
.esconder
Oculta la información sobre herramientas actual y restablece la clase de posicionamiento cuando cambia debido a la colisión. Se dispara las Tooltip # evento: ocultar los eventos.
.palanca
Además de las funciones estáticas show () y hide (), .toggle agrega un método de alternancia.
.destruir
Destruye una instancia de información sobre herramientas y el elemento de plantilla se elimina de la vista.