Skip to content

Commit 488a972

Browse files
untempsuntemps
authored
docs: Write README documentation (#6)
1 parent c0d6c78 commit 488a972

File tree

6 files changed

+262
-29
lines changed

6 files changed

+262
-29
lines changed

‎README.md‎

Lines changed: 166 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,172 @@
11
<p align="center">
2-
svelte-use-tooltip
2+
<img src="assets/svelte-use-tooltip.png" alt="svelte-use-tooltip" height="100"/>
33
</p>
44
<p align="center">
55
Svelte action to display a tooltip
66
</p>
77

8-
TODO
8+
---
9+
10+
[![npm](https://img.shields.io/npm/v/@untemps/svelte-use-tooltip?style=for-the-badge)](https://www.npmjs.com/package/@untemps/svelte-use-tooltip)
11+
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/untemps/svelte-use-tooltip/deploy?style=for-the-badge)](https://github.com/untemps/svelte-use-tooltip/actions)
12+
[![Codecov](https://img.shields.io/codecov/c/github/untemps/svelte-use-tooltip?style=for-the-badge)](https://codecov.io/gh/untemps/svelte-use-tooltip)
13+
14+
## Installation
15+
16+
```bash
17+
yarn add @untemps/svelte-use-tooltip
18+
```
19+
20+
## Usage
21+
22+
### Basic usage
23+
24+
```sveltehtml
25+
<script>
26+
import { useTooltip } from '@untemps/svelte-use-tooltip'
27+
28+
const _onTooltipClick = (arg, event) => {
29+
console.log(arg, event)
30+
}
31+
</script>
32+
33+
<div use:useTooltip={{
34+
contentSelector: '.tooltip__content',
35+
contentClone: false,
36+
contentActions: {
37+
'*': {
38+
eventType: 'click',
39+
callback: _onTooltipClick,
40+
callbackParams: ['ok'],
41+
closeOnCallback: true
42+
},
43+
},
44+
contentClassName: 'tooltip',
45+
disabled: false,
46+
animated: true
47+
}
48+
} class="tooltip__target">
49+
Hover me
50+
</div>
51+
<span class="tooltip__content">Hi!</span>
52+
53+
<style>
54+
.tooltip__target {
55+
width: 10rem;
56+
height: 3rem;
57+
background-color: white;
58+
color: black;
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
63+
}
64+
65+
.tooltip__target:hover {
66+
cursor: pointer;
67+
background-color: black;
68+
color: white;
69+
}
70+
71+
.tooltip__content {
72+
border: solid 1px white;
73+
background: none;
74+
}
75+
76+
:global(.tooltip) {
77+
position: absolute;
78+
z-index: 9999;
79+
max-width: 120px;
80+
background-color: #ee7008;
81+
color: #fff;
82+
text-align: center;
83+
border-radius: 6px;
84+
padding: 0.5rem;
85+
}
86+
87+
:global(.tooltip::after) {
88+
content: '';
89+
position: absolute;
90+
top: 100%;
91+
left: 50%;
92+
margin-left: -5px;
93+
border-width: 5px;
94+
border-style: solid;
95+
border-color: #ee7008 transparent transparent transparent;
96+
}
97+
</style>
98+
```
99+
100+
## API
101+
102+
| Props | Type | Default | Description |
103+
|----------------------|---------|---------|-----------------------------------------------------------------------------------------------------------------|
104+
| `contentSelector` | string | null | Selector of the content to display in the tooltip. |
105+
| `contentClone` | boolean | null | Flag to clone the content to display in the tooltip. If false, the content is removed from its previous parent. |
106+
| `contentActions` | object | null | Configuration of the tooltip actions (see [Content Actions](#content-actions)). |
107+
| `containerClassName` | string | null | Class name to apply to the tooltip container. |
108+
| `disabled` | boolean | false | Flag to disable the tooltip content. |
109+
| `animated` | boolean | false | Flag to animate tooltip transitions. |
110+
111+
### Content Actions
112+
113+
The `contentActions` prop allow handling interactions within the tooltip content.
114+
115+
Each element inside the content parent may configure its own action since it can be queried using the key-selector.
116+
117+
One event by element is possible so far as elements are referenced by selector. The last one declared in the `contentActions` object has precedence over the previous ones.
118+
119+
```sveltehtml
120+
<script>
121+
import { useTooltip } from '@untemps/svelte-use-tooltip'
122+
</script>
123+
124+
<div use:useTooltip={{
125+
contentSelector: '#content',
126+
contentClone: false,
127+
contentActions: {
128+
'#button1': {
129+
eventType: 'mouseenter',
130+
callback: (arg) => console.log(arg),
131+
callbackParams: ['Haha you\'re hovering the button 1'],
132+
closeOnCallback: true
133+
},
134+
'#button2': {
135+
eventType: 'click',
136+
callback: (arg1, arg2) => console.log(arg1, arg2),
137+
callbackParams: ['Haha you\'ve clicked the', 'button 2'],
138+
closeOnCallback: false
139+
},
140+
}
141+
}}>Hover me</div>
142+
<span id="content">
143+
<button id="button1">Action 1</button>
144+
<button id="button2">Action 2</button>
145+
</span>
146+
```
147+
148+
| Props | Type | Default | Description |
149+
|-------------------|----------|---------|----------------------------------------------------------------------------------------------------------|
150+
| `eventType` | string | null | Type of the event. All available [events](https://developer.mozilla.org/fr/docs/Web/Events) can be used. |
151+
| `callback` | function | null | Function to be used as event handler. |
152+
| `callbackParams` | array | null | List of arguments to pass to the event handler in. |
153+
| `closeOnCallback` | boolean | false | Flag to automatically close the tooltip when the event handler is triggered. | |
154+
155+
## Development
156+
157+
The component can be served for development purpose on `http://localhost:5000/` running:
158+
159+
```
160+
yarn dev
161+
```
162+
163+
## Contributing
164+
165+
Contributions are warmly welcomed:
166+
167+
- Fork the repository
168+
- Create a feature branch
169+
- Develop the feature AND write the tests (or write the tests AND develop the feature)
170+
- Commit your changes
171+
using [Angular Git Commit Guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)
172+
- Submit a Pull Request

‎assets/svelte-palette.png‎

-45.5 KB
Binary file not shown.

‎assets/svelte-use-tooltip.png‎

29.1 KB
Loading

‎assets/trash.png‎

-11.9 KB
Binary file not shown.

‎dev/src/App.svelte‎

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { useTooltip } from '../../src'
33
44
let useCustomTooltipClass = false
5+
let animateTooltip = false
56
67
const _onTooltipClick = (arg, event) => {
78
console.log(arg)
@@ -11,20 +12,36 @@
1112
<main>
1213
<div class="container">
1314
<div use:useTooltip={{
14-
contentSelector: '.tooltip__button',
15+
contentSelector: '.tooltip__content',
1516
contentClone: false,
1617
contentActions: {
17-
'*': {
18-
eventType: 'click',
19-
callback: _onTooltipClick,
20-
callbackParams: ['ok'],
21-
closeOnCallback: true
22-
},
18+
'#button1': {
19+
eventType: 'mouseenter',
20+
callback: (arg) => console.log(arg),
21+
callbackParams: ['Haha you\'re hovering the button 1'],
22+
closeOnCallback: false
23+
},
24+
'#button2': {
25+
eventType: 'mouseenter',
26+
callback: (arg1, arg2) => console.log(arg1, arg2),
27+
callbackParams: ['Haha you\'re hovering the', 'button 2'],
28+
closeOnCallback: false
29+
},
30+
'#button2': {
31+
eventType: 'click',
32+
callback: (arg1, arg2) => console.log(arg1, arg2),
33+
callbackParams: ['Haha you\'ve clicked the', 'button 2'],
34+
closeOnCallback: true
35+
},
2336
},
2437
contentClassName: useCustomTooltipClass ? 'tooltip' : null,
2538
disabled: false,
26-
}} class="target">Hover me</div>
27-
<span class="tooltip__button">Hi!</span>
39+
animated: animateTooltip
40+
}} class="tooltip__target">Hover me</div>
41+
<span class="tooltip__content">
42+
<button id="button1">Action 1</button>
43+
<button id="button2">Action 2</button>
44+
</span>
2845
<form class="settings__form">
2946
<h1>Settings</h1>
3047
<fieldset>
@@ -33,6 +50,12 @@
3350
<input type="checkbox" bind:checked={useCustomTooltipClass} />
3451
</label>
3552
</fieldset>
53+
<fieldset>
54+
<label>
55+
Animate tooltip:
56+
<input type="checkbox" bind:checked={animateTooltip} />
57+
</label>
58+
</fieldset>
3659
</form>
3760
</div>
3861
</main>
@@ -53,7 +76,7 @@
5376
row-gap: 1rem;
5477
}
5578
56-
.target {
79+
.tooltip__target {
5780
width: 10rem;
5881
height: 3rem;
5982
background-color: white;
@@ -64,12 +87,16 @@
6487
box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
6588
}
6689
67-
.target:hover {
90+
.tooltip__target:hover {
6891
cursor: pointer;
6992
background-color: black;
7093
color: white;
7194
}
7295
96+
.tooltip__content {
97+
color: white
98+
}
99+
73100
.settings__form {
74101
display: flex;
75102
flex-direction: column;
@@ -109,6 +136,7 @@
109136
border-radius: 6px;
110137
padding: 0.5rem;
111138
}
139+
112140
:global(.tooltip::after) {
113141
content: '';
114142
position: absolute;

0 commit comments

Comments
 (0)