https://github.com/versile2/Tooltip-CSS-dataset-Extensionsrc/css/tooltip-extension.min.css

npm i @jilael/css-tooltips

<link rel="stylesheet" href="https://unpkg.com/@jilael/css-tooltips@0.3.0/css/tooltip-extensions.min.css">

Usage

Tooltips are displayed into a small box on bottom of the element by default, offset by 8px by default. All you have to do is to add data-tooltip='Test Tooltip' and you have your very first tooltip!

Classes

You can set a myriad of options for the Tooltips themselves by using CSS classes on the html element where you add a data-tooltip.

1. Position: class='tooltip-[direction]' will position the tooltip in one of 9 directions (top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, center)
2. Arrow: By default the tooltip does not use an arrow, add class='tooltip-arrow' to add an arrow
3. Color Modifiers: class='tooltip-[color]' will change the color of the tooltip. (primary, secondary, tertiary, success, info, warning, danger) You can use more advanced coloring options in the Styles section.
4. Sizing: class='tooltip-[size]' will change the size of the tooltip. You can use more advanced sizing options in the Styles section. (small, medium, large, fit)
5. Text position: class="tooltip-fixed tooltip-text-left" will set the tooltip width to be fixed to the sizing option you choose. Combine that with tooltip-text-left/right/center to text-align your tooltip text.
6. Other: classes such as tooltip-hidden, tooltip-active, tooltip-hidden-mobile, tooltip-hidden-tablet, tooltip-hidden-desktop can be used for other options.

Styles

You can set a myriad of style options for the Tooltips themselves by using the style attribute on the html element you add a data-tooltip option to. You can create CSS classes using these styles or apply them individually. You can even apply these styles globally by setting :root {} in your CSS file.

1. Show Delay: style="--tooltip-show-delay: 1000ms;" will set the delay before the tooltip shows after you start hovering. You can use s for seconds or ms for milliseconds. Default is 300ms
2. Hide Delay: style="--tooltip-hide-delay: 1000ms;" will set the delay before the tooltip hides after you stop hovering. Default is 200ms
3. Transition: style="--tooltip-transition: bounce;" will set the animation transition the tooltip to show or hide. Default is slide
4. Tooltip Distance style="--tooltip-distance: 50px;" will set the distance the tooltip is offset from the element. Does not do anything for "center". Default is 8px
5. Tooltip Font Options: You can set a myriad of font options --tooltip-font-[(family),(size),(weight),(lineheight)]Default is "Helvetica Neue", Arial, sans-serif, 0.875rem, 400, and 1.4 respectively.
6. Tooltip Z-Index: style="--tooltip-z-index: 1000;" will set the z-index of the tooltip. Default is 1200
7. Tooltip Advanced Sizing: style="--tooltip-width: 100px;" will set the width of the tooltip statically. Default if no tooltip size selected, tooltip-large or 300px.
8. Tooltip Advanced Sizing: style="--tooltip-size-[small/medium/large]: 100px;" will set the width of the specified size of tooltip statically. Default if no tooltip size selected, tooltip-large or 300px.
9. Advanced coloring: style="--tooltip-background-color: red;--tooltip-foreground-color: white;" will set the background color of the tooltip to red and the text color to white. You can use any valid CSS color such as #fff or rgb()