Latest web development tutorials

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 »