jizy-tooltip 2.1.0 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -2
- package/dist/js/jizy-tooltip.min.js +1 -1
- package/lib/js/Tooltip.js +3 -1
- package/lib/less/variables.less +2 -0
- package/package.json +14 -15
package/README.md
CHANGED
|
@@ -1,2 +1,82 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
1
|
+
# jizy-tooltip
|
|
2
|
+
|
|
3
|
+
A lightweight JS tooltip module driven by `data-*` attributes.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install jizy-tooltip
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
import { Tooltip } from 'jizy-tooltip';
|
|
15
|
+
|
|
16
|
+
const tooltip = new Tooltip('jTip', 10).ready();
|
|
17
|
+
|
|
18
|
+
document.querySelectorAll('[data-tip]').forEach(el => {
|
|
19
|
+
el.addEventListener('mouseenter', () => tooltip.fromElement(el));
|
|
20
|
+
el.addEventListener('mouseleave', () => tooltip.hide());
|
|
21
|
+
});
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<button
|
|
26
|
+
data-tip="Save the current document"
|
|
27
|
+
data-tip-header="Save"
|
|
28
|
+
data-tip-position="bottom"
|
|
29
|
+
data-tip-theme="dark">
|
|
30
|
+
Save
|
|
31
|
+
</button>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
The tooltip is dismissed on click outside, touch outside, or `Escape`.
|
|
35
|
+
|
|
36
|
+
## Trigger attributes
|
|
37
|
+
|
|
38
|
+
| Attribute | Default | Description |
|
|
39
|
+
|---|---|---|
|
|
40
|
+
| `data-tip` | — | Tooltip body (required) |
|
|
41
|
+
| `data-tip-header` | — | Optional header |
|
|
42
|
+
| `data-tip-position` | `top` | `top`, `bottom`, `left`, `right`, `center` |
|
|
43
|
+
| `data-tip-theme` | — | Space-separated theme classes added to the tip |
|
|
44
|
+
| `data-tip-id` | auto | Stable id assigned on first show |
|
|
45
|
+
|
|
46
|
+
## Constructor
|
|
47
|
+
|
|
48
|
+
`new Tooltip(id = 'jTip', distance = 10)`
|
|
49
|
+
|
|
50
|
+
- `id` — id of the singleton tip element appended to `<body>`.
|
|
51
|
+
- `distance` — pixel gap between trigger and tip.
|
|
52
|
+
|
|
53
|
+
## API
|
|
54
|
+
|
|
55
|
+
- `ready()` — bind global dismiss listeners (call once after construction).
|
|
56
|
+
- `fromElement(el)` — show the tip for a trigger element.
|
|
57
|
+
- `show(tip)` / `hide(tip?)` — low-level show/hide using a `Tip` instance.
|
|
58
|
+
- `setRenderer(fn)` — supply a custom renderer `(tip) => htmlString` to replace the default template.
|
|
59
|
+
|
|
60
|
+
## Styling
|
|
61
|
+
|
|
62
|
+
Import the bundled CSS from `dist/css/` or the LESS sources from `lib/less/`. The build emits a generated `_variables.less` from `lib/less/variables.less` merged with the `lessVariables` defined in `config/jpack.js` (e.g. `desktopBreakpoint`).
|
|
63
|
+
|
|
64
|
+
Override variables before importing `tooltip.less`, or fork `variables.less` to retheme:
|
|
65
|
+
|
|
66
|
+
```less
|
|
67
|
+
@tooltip-bg-color: #1a1a1a;
|
|
68
|
+
@tooltip-fg-color: #fff;
|
|
69
|
+
@tooltip-width: 200px;
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Build
|
|
73
|
+
|
|
74
|
+
```bash
|
|
75
|
+
npm run jpack:dist
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Outputs `dist/js/jizy-tooltip.min.js` and `dist/css/jizy-tooltip.min.css`.
|
|
79
|
+
|
|
80
|
+
## License
|
|
81
|
+
|
|
82
|
+
MIT © Joffrey Demetz
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! jTooltip v2.1.
|
|
1
|
+
/*! jTooltip v2.1.2 | 2026-04-22T08:43Z | [default] */
|
|
2
2
|
!function(t){"use strict";if("object"!=typeof t||!t||!t.document)throw new Error("jTooltip requires a window and a document");if(void 0!==t.jTooltip)throw new Error("jTooltip is already defined");!function(){class t{constructor(t){this.el=t,this.uuid=t.dataset.tipId||autoUuid(),this.header=t.dataset.tipHeader||"",this.content=t.dataset.tip||"",this.theme=t.dataset.tipTheme||"",this.position=t.dataset.tipPosition||"top",this.coords=null}setCoords(){const t=this.el.getBoundingClientRect();this.coords={top:t.top+window.scrollY,left:t.left+window.scrollX,right:t.right+window.scrollX,bottom:t.bottom+window.scrollY,width:t.width,height:t.height}}autoUuid(){return crypto.randomUUID?crypto.randomUUID():"tip-"+Date.now()+Math.random().toString(16).slice(2)}}}();t.jTooltip=Tooltip}("undefined"!=typeof window?window:this);
|
package/lib/js/Tooltip.js
CHANGED
package/lib/less/variables.less
CHANGED
package/package.json
CHANGED
|
@@ -1,33 +1,32 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jizy-tooltip",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.2",
|
|
4
4
|
"browser": "dist/js/jizy-tooltip.min.js",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"jizy": "dist/",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"JiZy",
|
|
10
|
+
"JS",
|
|
11
|
+
"Tooltip"
|
|
12
|
+
],
|
|
13
|
+
"author": "Joffrey Demetz <joffrey.demetz@gmail.com> (https://joffreydemetz.com/)",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"description": "A lightweight JS tooltip module",
|
|
16
|
+
"homepage": "https://jizy.joffreydemetz.com/tooltip",
|
|
8
17
|
"files": [
|
|
9
18
|
"dist/*",
|
|
10
19
|
"lib/*"
|
|
11
20
|
],
|
|
12
21
|
"scripts": {
|
|
13
|
-
"jpack:
|
|
14
|
-
"jpack:export-debug": "node ./cli/jpack.js --action build --name perso --debug",
|
|
15
|
-
"jpack:dist": "node ./cli/jpack.js",
|
|
16
|
-
"jpack:dist-debug": "node ./cli/jpack.js --debug"
|
|
22
|
+
"jpack:dist": "node ./cli/jpack.js"
|
|
17
23
|
},
|
|
18
24
|
"repository": {
|
|
19
25
|
"type": "git",
|
|
20
26
|
"url": "git+https://github.com/joffreydemetz/jizy-tooltip.git"
|
|
21
27
|
},
|
|
22
|
-
"keywords": [
|
|
23
|
-
"JiZy",
|
|
24
|
-
"JS",
|
|
25
|
-
"Tooltip"
|
|
26
|
-
],
|
|
27
|
-
"author": "Joffrey Demetz <joffrey.demetz@gmail.com> (https://joffreydemetz.com/)",
|
|
28
|
-
"license": "MIT",
|
|
29
|
-
"description": "A lightweight JS tooltip module",
|
|
30
28
|
"devDependencies": {
|
|
31
|
-
"jizy-packer": "^2.1"
|
|
29
|
+
"jizy-packer": "^2.1.44",
|
|
30
|
+
"less": "^4.4.1"
|
|
32
31
|
}
|
|
33
|
-
}
|
|
32
|
+
}
|