Foundation Tooltip

The tooltip displays when the mouse hovers over the element:

We can add the data-tooltip attribute to any element to create a tooltip. Use the title attribute to set the text of the tooltip.

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

Example

&lt;span data-tooltip title="Hooray!">Hover over me!</span>
    <!-- Initialize Foundation JS --><script>
    $(document).ready(function() {    
    $(document).foundation();})
    </script>

The .has-tip class can bold the text that the mouse hovers over:

Example

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

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 screens, the tooltip's width is 100%.

Example

&lt;span data-tooltip class="has-tip tip-top" title="Hooray!">Top</span>
    &lt;span data-tooltip class="has-tip tip-bottom" title="Hooray!">Bottom</span>
    &lt;span data-tooltip class="has-tip tip-left" title="Hooray!">Left</span>
    &lt;span data-tooltip class="has-tip tip-right" title="Hooray!">Right</span>

Rounded Tooltip

The .radius and .round classes are used to set rounded tooltips:

Example

&lt;span data-tooltip class="has-tip" title="Hooray!">Default</span>&lt;span 
    data-tooltip class="has-tip radius" title="Hooray!">Radius</span>&lt;span 
    data-tooltip class="has-tip round" title="Hooray!">Round</span>