A very lightweight tooltip utility library, made using only CSS with dynamic light and dark themes.
Using npm
$ npm install css-only-tooltipUsing yarn
$ yarn add css-only-tooltipUsing jsDelivr CDN
<linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-only-tooltip@latest/dist/styles.min.css">
Using unpkg CDN:
<linkrel="stylesheet" href="https://unpkg.com/css-only-tooltip@latest/dist/styles.min.css">
css-only-tooltip uses only data html attribute for working. So, the only step is to import the CSS in your file and use it.
Add the CDN link in your HTML file inside the <head> tag.
And then pass the tooltip text in the format:
<!DOCTYPE html><head><!-- Add the CDN link --><linkrel="stylesheet" href="https://unpkg.com/css-only-tooltip@0.0.12/dist/styles.min.css"></head><body><divclass="container"><pdata-css-only-tooltip="Tooltip 1">Text</p></div></body></html>Import the styleSheet into the main root level component of the App. (for eg. in App.js in React App)
import'css-only-tooltip/dist/styles.min.css';Now, add the text in the data attribute in the child components.
<spandata-css-only-tooltip="Hello from tooltip">Hover on me to see the tooltip</span>There are customization options provided.
Provide the customization options in a space separate string in the data attribute like this:-
<pdata-css-only-props="customization options">There are some optional customization options available.
There are four positions provided.
Bottomis the default option.toprightbottomleft
This supports the user device's theme dynamically. There's no need to specify the theme separately. Beside this, there are two theme options provided for customization.
lightis default option.darklight
| Option | Values | default | Required |
|---|---|---|---|
| Position | top, right, bottom, left | bottom | No |
| Theme | light, dark | light | No |
- dark theme, right side.
<spandata-css-only-tooltip="Tooltip 2 bottom" data-css-only-tooltip-props="light bottom"> Dark tooltip on the right side </span>
Play with it live:-
