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>
<! - 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>
<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>
<Span Daten-Tooltip class = " hat-Spitzenradius" title = "Hooray!"> Radius </ span>
<Span Daten-Tooltip class = " has-Spitze Runde" title = "Hurra!"> Rund </ span>
Versuchen »