Lightweight And Simple Tooltips In Pure CSS – css-tooltip

Preview:

Description:

A lightweight CSS library (~2kb) for attaching custom, elegant, animated tooltips to DOM elements using pure CSS and HTML data attributes.

How to use it:

Install & download the library.

# NPM
$ npm install css-tooltip --save

Import the css-tooltip library.

<link rel="stylesheet" href="/dist/css-tooltip.min.css" />

Define the tooltip content in the data-tooltip attribute. That’s it.

<h1 data-tooltip="Tooltip Text">? Tooltip</h1>

The library also supports multi-line tooltips.

<h1 class="tooltip-multiline" data-tooltip="Long Tooltip Here">? Tooltip</h1>

Set the position of the tooltip using the following CSS classes. Default: top.

• tooltip-bottom
• tooltip-bottom-right
• tooltip-bottom-left
• tooltip-top-right
• tooltip-top-left

<h1 class="tooltip-bottom" data-tooltip="Long Tooltip Here">? Tooltip</h1>

To customize the tooltip, just override the variables in the css-tooltip.scss and compile it into your own CSS:

$background-color   : #333;
$foreground-color   : #eee;
$arrow-size         : 8px;
$vertical-shift     : 12px;
$multiline-width    : 240px;
$tooltip-padding    : 8px 12px;
$roundness          : 3px; // 0 || border-radius
$shadow             : 0 5px 15px -5px rgba(0, 0, 0, .65); // 0 || box-shadow
$load-styles        : true !default; // Extra styles needed?