Open/Close Interactive Tooltip
An interactive tool tip, which you can open and close with a click. I used the CSS3-selctor
:target for this action. The animation for the opening and closing is implemented with CSS3 transitions. Initially, the paragraph is hidden by setting it's
top offset to
-230px. When the
#show is targeted, the
top offset of the paragraph is changed to
0px and it slides down (with the helps of transitions).
It works great in Chrome, Opera, Safari and Firefox. It also works in Internet Explorer 9 but the animation won't be visible as it doesn't support animations or transitions yet.