Tooltip.js

Note: Hover over the elements below to see their tooltips.

Example 1 (very long URL): Google Maps - Winnipeg Legislature Building (hover me)

Example 2 (tooltip on various backgrounds):

white background (hover me)

red background (hover me)

black background (hover me)

green background (hover me)

blue background - this text has a long tooltip that wraps around; see "options" to change the wrap around length (hover me)

Orange background - this text doesn't itself have a tooltip, but its parent element does (hover me or anywhere inside my rectangle)

Example 3 (inserting manual line breaks):

Although the tooltip already wraps around long text, sometimes you want to insert your own line breaks into the tooltip. You can use the regular <br> (refer to your <!doctype> for correct syntax) tag to do so.

Hover anywhere on the following piece of code to see it in action:

  <div title="Income: $2195.26<br>Expenses: $1362.19">Balance</div>