Tooltips Demo

There are some use cases for the tooltips widget

top ↑Simple Tooltips

  • This element has a simple tooltip
  • And this element has simple tooltip

top ↑Tooltips With HTML

If you need to put some html code into your tooltip, then just assign the escaped html code to the title attribute, it will work.

<li title="<b>Some</b> <u>html</u>">...</li>

  • This has some html tooltip
  • So does this one

top ↑Tooltips On Images

Images can has tooltips too. You can use ether title or alt attribute to keep the tooltip text.

Some boats at Coogie

top ↑Customized Tooltips

If an element has an id attribute then the related tooltip element will have the same id but with the -tooltip suffix, so you can customize them separately.

  • This one has blue tooltip
  • This one has green tooltip
  • This one has red tooltip