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.