Press "Enter" to skip to content

Animated Tooltip Using Only CSS/HTML | css-only-tooltip

css-only-tooltip is a very lightweight utility library, built with the only CSS with dynamic, dark themes and easy to implement and configure via an HTML data theme.

tooltip animation css, tooltip animation codepen, jquery tooltip with html content, tooltip html, css tooltip

How to make use of it:

1. Load the core stylesheet ‘styles.min.css’ within the doc.

<link rel=”stylesheet” href=”dist/styles.min.css” />

2. Define the tooltip content within the ‘data-css-only-tooltip’ attribute.

<button class="btn" data-css-only-tooltip="Default Tooltip">Default</button>

3. Use Dark Theme as an alternative.

<button class="btn" data-css-only-tooltip="Dark Theme" data-css-only-tooltip-props="dark">Dark Theme</button>

4. Determine the position of the tooltip.

<button class="btn" data-css-only-tooltip="Top Tooltip" data-css-only-tooltip-props="top">Top Tooltip</button>

5. Combine the Theme and Position choices:

<button class="btn" data-css-only-tooltip="Dark Theme + Top Position" data-css-only-tooltip-props="dark top">Dark Theme + Top Position</button>

CSS/HTML Only Animated Tooltip Library, css-tooltip Plugin/Github, css tooltip library, pure css tooltip, dynamic tooltip css


See Demo And Download

Official Website(thoughtlessmind): Click Here

This superior jQuery/javascript plugin is developed by thoughtlessmind. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.