A very lightweight tooltip utility library, made using only CSS with dynamic light and dark themes.
-
Using npm
$ npm install css-only-tooltip -
Using yarn
$ yarn add css-only-tooltip -
Using jsDelivr CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-only-tooltip@latest/dist/styles.min.css">
-
Using unpkg CDN:
<link rel="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 -->
<link rel="stylesheet" href="https://unpkg.com/css-only-tooltip@0.0.12/dist/styles.min.css">
</head>
<body>
<div class="container">
<p data-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.
<span data-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:-
<p data-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.
<span data-css-only-tooltip="Tooltip 2 bottom" data-css-only-tooltip-props="light bottom"> Dark tooltip on the right side </span>
Play with it live:-
