css-only-tooltip v1.1.2
css-only-tooltip
A very lightweight tooltip utitlity library, made using only CSS with dynamic light and dark themes.
Insatallation
- Using npm
$ npm install css-only-tooltip
Using yarn
$ yarn add css-only-tooltipUsing jsDelivr CDN
```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-only-tooltip@latest/dist/styles.min.css"> ```
- Using unpkg CDN:
```html <link rel="stylesheet" href="https://unpkg.com/css-only-tooltip@latest/dist/styles.min.css"> ```
Quick start
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.
When using CDN:-
Add the CDN link in your HTML file inside the <head> tag.
And then pass the tooltip text in 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>When using Package Manger (NPM/Yarn):-
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>Customization
There are customization options provided.
Provide the customization options in a space seperated string in the data attribute like this:-
<p data-css-only-props="customization options">Options:
Thre are some optional customization options are available.
Positions:
There are four positions provided.Bottomis default option.toprightbottomleft
Themes:
This supports the user device's theme dynamically. There's no need to specify theme spereately. 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 |
Examples:
- dark theme, right side.
Play with it live:-<span data-css-only-tooltip="Tooltip 2 bottom" data-css-only-tooltip-props="light bottom"> Dakr tooltip on right side </span>