Foundation balloon
Balloons move the mouse over the element after the show:
We can add any element in the data-tooltip property to create a message. Use the title attribute to set the text message tips.
Note: The slider requires JavaScript. So you need to initialize oundation JS:
Examples
<Span data-tooltip title = " Hooray!"> Hover over me! </ Span>
<-! Initialize Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
<-! Initialize Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
try it"
.has-tip class may move the mouse bold text:
Balloon display position
By default, the prompt box will appear at the bottom of the element.
You can use .tip-top , .tip-left , .tip-right or .tip-bottom (default) to set the prompt box position.
Note: On the small screen sizes, balloon broadband is 100%.
Examples
<Span data-tooltip class = " has-tip tip-top" title = "Hooray!"> Top </ span>
<Span data-tooltip class = " has-tip tip-bottom" title = "Hooray!"> Bottom </ span>
<Span data-tooltip class = " has-tip tip-left" title = "Hooray!"> Left </ span>
<Span data-tooltip class = " has-tip tip-right" title = "Hooray!"> Right </ span>
<Span data-tooltip class = " has-tip tip-bottom" title = "Hooray!"> Bottom </ span>
<Span data-tooltip class = " has-tip tip-left" title = "Hooray!"> Left </ span>
<Span data-tooltip class = " has-tip tip-right" title = "Hooray!"> Right </ span>
try it"
Round balloon
.radius and .round class is used to set the rounded tips box:
Examples
<Span data-tooltip class = " has-tip" title = "Hooray!"> Default </ span>
<Span data-tooltip class = " has-tip radius" title = "Hooray!"> Radius </ span>
<Span data-tooltip class = " has-tip round" title = "Hooray!"> Round </ span>
<Span data-tooltip class = " has-tip radius" title = "Hooray!"> Radius </ span>
<Span data-tooltip class = " has-tip round" title = "Hooray!"> Round </ span>
try it"