Foundation prompt box


May 04, 2021 13:00 Foundation5


Table of contents


Foundation prompt box

The prompt box appears when the mouse moves over the element:

We can add the data-tooltip any element to create a hint. U se the title property to set the text of the prompt message.

Note: The slider requires JavaScript. So you need to initialize the development JS:

Instance

< span data-tooltip title= "Hooray!" > H over over me! < /span >

<!-- Initialize Foundation JS -->
< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >

Try it out . . .

.has-tip class can move with a bold mouse:

Instance

< span data-tooltip class= "has-tip" title= "Hooray!" > H over over me! < /span >

Try it out . . .

The prompt box shows where

By default, the prompt box appears at the bottom of the element.

You .tip-top .tip-left .tip-right or .tip-bottom (default) to set the location of the prompt box.

Note: On a small screen, the prompt box has 100% broadband.

Instance

< 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 >

Try it out . . .

Fillet prompt box

.radius and .round are used to set the fillet prompt box:

Instance

< 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 >

Try it out . . .