Latest web development tutorials

Stiftung Ballon

Ballons bewegen Sie die Maus über das Element nach der Show:

Wir können jedes Element in der hinzufügen data-tooltip - Eigenschaft eine Nachricht zu erstellen. Verwenden Sie den title Attribut der Textnachricht Tipps zu setzen.

Hinweis: Der Schieber benötigt JavaScript. So müssen Sie tiftung JS zu initialisieren:

Beispiele

<Span data-Tooltip title = " Hooray!"> Hover über mich! </ Span>

<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>

Versuchen »

.has-tip - Klasse kann die Maus fett gedruckten Text zu verschieben:

Beispiele

<Span Daten-Tooltip class = " has-Spitze" title = "Hooray!"> Hover über mich! </ Span>

Versuchen »

Ballon-Anzeigeposition

Standardmäßig wird das Eingabefeld am unteren Rand des Elements angezeigt.

Sie können mit .tip-top , .tip-left , .tip-right oder .tip-bottom (Standard) , um die EingabeBox Position.

Hinweis: Auf den kleinen Bildschirmgrößen Ballon Breitband 100%.

Beispiele

<Span Daten-Tooltip class = " has-Spitze tip-top" title = "Hurra!"> Top </ span>
<Span Daten-Tooltip class = " hat-Spitze Spitze-bottom" title = "Hurra!"> Unten </ span>
<Span Daten-Tooltip class = " has-Spitze Spitze-links" title = "Hurra!"> Links </ span>
<Span Daten-Tooltip class = " has-Spitze Spitze-rechts" title = "Hurra!"> Rechts </ span>

Versuchen »

Rund Ballon

.radius und .round Klasse ist die abgerundeten Spitzen Box Set verwendet:

Beispiele

<Span Daten-Tooltip class = " has-Spitze" title = "Hooray!"> Standard </ span>
<Span Daten-Tooltip class = " hat-Spitzenradius" title = "Hooray!"> Radius </ span>
<Span Daten-Tooltip class = " has-Spitze Runde" title = "Hurra!"> Rund </ span>

Versuchen »