O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Tooltips

We've all seen tooltips, text that appears to jump out of a word or phrase when you hover over it on your screen. Many browsers support tooltips inherently. Add some text to the title attribute of an element, and you have a tooltip. Foundation adds styles and JavaScript to enhance tooltips.

Here is a basic tooltip:

<p>In this section we will explore Foundation's <span title="Text that appears to jump out of a word or phrase when you hover over it on your screen.">tooltip</span> plugin.</p>

When you display this example paragraph on the screen, it will look normal. When you hover your mouse over the word tooltip, the text from the title attribute will display.

Add the has-tip class to the <span> tag that surrounds the word tooltip, and the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required