Foundation Tooltip

The tooltip displays when the mouse moves over the element:

We can add to any elementdata-tooltipan attribute to create a tooltip. Usetitlean attribute to set the text of the tooltip.

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

Example

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

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

Try it Yourself »

.has-tipThe class can bold the mouseover text:

Example

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

Try it Yourself »

Tooltip Display Position

By default, the tooltip appears at the bottom of the element.

You can use.tip-top, .tip-left, .tip-right or .tip-bottom(Default) To set the position of the tooltip.

Note:On small-sized screens, the tooltip width is 100%.

Example

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

Rounded Tooltip

.radiusand.roundThe class is used to set rounded tooltips:

Example

<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 Yourself »
other extensions