Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Open/Close Interactive Tooltip

    CSSDeck G+