💬 css-tooltip 
Only CSS lightweight, minimal and simple tooltips
Install
$ npm i css-tooltipYou can download it here or
include the css file directly from unpkg.com:
Usage
Include the css-tooltip minified stylesheet file on the head of your document.
... Add the data-tooltip attribute to the element you want the tooltip in. The value of that attribute will be the text shown by the tooltip
tooltipStyles
There are some available classes to apply different styling to the tooltip
tooltip-multiline: Creates a multiline tooltip
Positioning :
tooltip-bottom: Places the tooltip at the bottom (centered)tooltip-bottom-right: Places the tooltip at the bottom right.tooltip-bottom-left: Places the tooltip at the bottom left.tooltip-top-right: Places the tooltip at the top right.tooltip-top-left: Places the tooltip at the top left.
There's no tooltip-top class as it is the default styling for the tooltip
Example:
You just need to add the class with the style you want to apply, for example, a multiline tooltip located on the bottom left would have the class tooltip-multiline tooltip-bottom-left :
tootltipThe following page has got some examples using the different styles : alterebro.github.io/css-tooltip/
Customize
You can customize the output of the tooltip by tweaking the source file variables src/css-tooltip.scss.
// Self explanatory names ;;;;;;; // 0 || border-radius ; // 0 || box-shadow ; // false to remove the extra styles. Then you'll have to build the CSS file:
Development
# Install dependencies $ npm install # Edit as your wish the main file ./src/css-tooltip.scss $ npm run watch # to see changes while editing the file $ npm run build # to create the distributable files License
ISC © Jorge Moreno — @alterebro