ALF Tooltips

The markup for tooltips is:

<div class="has-tooltip">
  ... some content
  <div class="tooltip">This is the tooltip</div>
</div>

Configuration classes

  • .left, .top, .bottom: to choose the side for the tooltip
  • Color identifiers: .main, .alt, .ok, .warning, .error

Notes

  • Tooltips have white-space:nowrap. You must ensure the content is properly layed out (using BR or similar).
  • The container (.has-tooltip) will have display: inline-block (so that the tooltip can show next to it). Be careful if you change this property, or the tooltip might appear in odd positions.
  • This are pure-CSS tooltips. There's no automatic position detection, so you must insure they popup in the right direction.

Examples

Default (right side)
This is the tooltip
left
This is the tooltip
top
This is the tooltip
bottom
This is the tooltip
main
This is the tooltip
alt
This is the tooltip
ok
This is the tooltip
warning
This is the tooltip
error
This is the tooltip

More complex examples

This paragraph has a tooltip that has complex HTML inside

Tooltips can have pretty much
any content you want.

Just make sure to break lines often.

This is a .box

Yep, no problem using
complex HTML in a tooltip

This paragraph has a tooltip that has a very long line

If you don't break lines in a tooltip, you risk having them way to long, which is not a good idea, and they might not look good at all...