El mejor tutorial de globo Fundación en 2024. En este tutorial podrás aprender
posición de visualización del globo,globo redondo,
globo Fundación
Globos mover el puntero del ratón sobre el elemento después del espectáculo:
Podemos añadir cualquier elemento de la data-tooltip propiedad para crear un mensaje. Utilice el title atributo para fijar las puntas de mensajes de texto.
Nota: El regulador requiere JavaScript. Por lo que necesita para inicializar JS OUNDATION:
Ejemplos
<Span título sobre herramientas de datos = " ¡Hurra!"> Pase el ratón sobre mí! </ Span>
<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate » .has-tip clase puede mover el ratón el texto en negrita:
Ejemplos
<Span class =-información sobre herramientas de datos " tiene de punta" title = "Hooray!"> Pase el ratón sobre mí! </ Span>
Trate »
posición de visualización del globo
Por defecto, el cuadro de mensaje aparecerá en la parte inferior del elemento.
Puede utilizar .tip-top , .tip-left , .tip-right o .tip-bottom (por defecto) para ajustar la posición de la caja del sistema.
Nota: en los pequeños tamaños de pantalla, la banda ancha globo es del 100%.
Ejemplos
<Span class =-información sobre herramientas de datos " tiene la punta de Tip-Top" title = "Hooray!"> Inicio </ span>
<Span class =-información sobre herramientas de datos " tiene-tip tip-inferior" title = "Hooray!"> Abajo </ span>
<Span datos sobre herramientas class = " tiene de punta punta-izquierda" title = "Hooray!"> Izquierdo </ span>
<Span class =-información sobre herramientas de datos " tiene la punta de la punta derecha" title = "Hooray!"> Derecho </ span>
Trate »
globo redondo
.radius y .round clase se utiliza para establecer el cuadro de puntas redondeadas:
Ejemplos
<Span class =-información sobre herramientas de datos " tiene de punta" title = "Hooray!"> Por defecto </ span>
<Span class =-información sobre herramientas de datos " tiene un radio de punta" title = "Hooray!"> Radio </ span>
<Span datos sobre herramientas class = " tiene de punta redonda" title = "Hooray!"> Ronda </ span>
Trate »