Minimal Animated CSS Tooltip Library – microtip

microtip.css is a lightweight HTML5/CSS library used for creating minimal, elegant, CSS3 animated tooltips appending to any DOM elements within the document.

Install the microtip:

# Yarn
yarn add microtip
# NPM
$ npm install microtip

How to use it:

Import the minified version of the microtip into the webpage.

<link href="microtip.min.css" rel="stylesheet">

Create your own tooltips for any elements using the following data attributes:

• data-microtip: tooltip content
• data-microtip-position: top, top-left, top-right, bottom, bottom-left, bottom-right, left and right
• data-microtip-size: small, medium, large and fit

<span data-microtip="Top Left Tooltip!" data-microtip-position="top-left" >Top Left</span>
<span data-microtip="Large Tooltip!" data-microtip-position="top-right" data-microtip-size="large">

Customize the animations and appearances of the tooltip via CSS variables:

:root {
  --microtip-transition-duration: 0.18s;
  --microtip-transition-delay: 0s;
  --microtip-transition-easing: ease-in-out;
  --microtip-font-size: 13px;
  --microtip-font-weight: normal;
  --microtip-text-transform: none;
}