Cooltipz.css Test File

Tooltip Direction^* - (exactly one direction is required for the tooltip to display)

[class*="cooltipz"] check

No Animation

Animations can be disabled by apply the data-cooltipz-static attribute or the .cooltipz--static class. Cooltipz.css also use the prefers-reduced-motion media query, so when the user's preferences indicate reduced motion, Cooltipz.css automatically disables animation.

Always Visible

You can add the data-cooltipz-visible attribute or the .cooltipz--visible class to make the tooltip always show, even if the user isn't hovering or focusing it.

You can make the tooltips show programatically by using the setAttribute() JavaScript function.

Sizes

Content

Should support HTML special characters, emojis, multilingual, Font Awesome.

Customisation

Expose 16 CSS variables: --cooltipz-bg-color, --cooltipz-border-width, --cooltipz-border-style, --cooltipz-border-color, --cooltipz-text-color, --cooltipz-font-size, --cooltipz-slide, --cooltipz-border-radius, --cooltipz-timing, --cooltipz-cursor, --cooltipz-small, --cooltipz-medium, --cooltipz-large, --cooltipz-arrow-size, --cooltipz-delay-show, --cooltipz-delay-hide.