Latest web development tutorials

balloon Fondazione

Palloncini spostare il mouse sopra l'elemento dopo lo spettacolo:

Siamo in grado di aggiungere qualsiasi elemento nel data-tooltip proprietà per creare un messaggio. Utilizzare il title attributo per impostare le punte dei messaggi di testo.

Nota: Il cursore richiede JavaScript. Quindi è necessario inizializzare OUNDATION JS:

Esempi

<Span titolo data-tooltip = " Evviva!"> Con il mouse sopra di me! </ Span>

<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

Prova »

.has-tip classe può spostare il testo in grassetto del mouse:

Esempi

<Span class data-tooltip = " ha-tip" title = "Evviva!"> Con il mouse sopra di me! </ Span>

Prova »

posizione di visualizzazione Balloon

Per impostazione predefinita, viene visualizzata la finestra di prompt in fondo dell'elemento.

È possibile utilizzare .tip-top , .tip-left , .tip-right o .tip-bottom (default) per impostare la posizione di dialogo di richiesta.

Nota: Con la piccola dimensioni dello schermo, pallone a banda larga è al 100%.

Esempi

<Span class data-tooltip = " ha-punta di punta in alto" title = "Evviva!"> Top </ span>
<Span class data-tooltip = " ha-tip tip-bottom" title = "Evviva!"> In basso </ span>
<Span data-tooltip class = " ha-tip tip-sinistra" title = "Evviva!"> Sinistra </ span>
<Span class data-tooltip = " ha-tip tip-destra" title = "Evviva!"> Destro </ span>

Prova »

pallone tondo

.radius e .round classe viene utilizzata per impostare la casella punte arrotondate:

Esempi

<Span class data-tooltip = " ha-tip" title = "Evviva!"> Default </ span>
<Span class data-tooltip = " ha-punta raggio" title = "Evviva!"> Raggio </ span>
<Span data-tooltip class = " ha-punta tonda" title = "Evviva!"> Rotonda </ span>

Prova »