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>
This website was designed, developed and is maintained by © Vadim Kononov.