Skip to content

Instantly share code, notes, and snippets.

@timpaul

timpaul/Info.md

Created May 23, 2012 09:59
Show Gist options
  • Save timpaul/2774347 to your computer and use it in GitHub Desktop.
Save timpaul/2774347 to your computer and use it in GitHub Desktop.
Download ZIP
Tooltip pattern
Raw
Info.md

Tooltip

This tooltip is based on the one here: http://viget.com/inspire/css-pointer-events-and-a-pure-css3-animating-tooltip

Please note that the tooltip content immediately follows the tooltip link in the code, so make sure that it reads semantically (a question/answer format works well).

Specific tooltips will probably need custom styling, depending on context/content.

GOOD: CSS-only BAD: You may need to style left margin and width of individual tooltips

Dependencies

GOV.UK template vx.x or above

Raw
pattern-code.html
<span class="tooltip-wrapper">
What happens if I hover over this text?
<span class="tooltip">
A tooltip pops up! <a href="">It can contains links and stuff too</a>
</span>
</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment