Skip to content

Commit ea03acd

Browse files
authored
feat: Add content prop (#12)
BREAKING CHANGE: `contentClassName` has been renamed `containerClassName` to be more consistent
1 parent eb34e8f commit ea03acd

File tree

9 files changed

+622
-417
lines changed

9 files changed

+622
-417
lines changed

.husky/commit-msg

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
npx commitlint --edit $1

.husky/pre-commit

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
yarn test:ci
5+
yarn prettier

dev/src/App.svelte

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<script>
22
import { useTooltip } from '../../src'
33
4-
let tooltipPosition = 'top'
4+
let textContent = null
55
let useCustomTooltipClass = false
6+
let tooltipPosition = 'top'
67
let isTooltipDisabled = false
78
let animateTooltip = false
89
let useCustomAnimationEnterClass = false
910
let useCustomAnimationLeaveClass = false
1011
11-
const _onTooltipClick = (arg, event) => {
12+
const _onTooltipClick = (arg) => {
1213
console.log(arg)
1314
}
1415
</script>
@@ -18,8 +19,9 @@
1819
<div
1920
use:useTooltip={{
2021
position: tooltipPosition,
21-
contentSelector: '.tooltip__button',
22-
contentClone: false,
22+
content: textContent,
23+
contentSelector: !textContent?.length ? '.tooltip__content' : null,
24+
contentClone: true,
2325
contentActions: {
2426
'*': {
2527
eventType: 'click',
@@ -28,7 +30,7 @@
2830
closeOnCallback: true,
2931
},
3032
},
31-
contentClassName: useCustomTooltipClass ? 'tooltip' : null,
33+
containerClassName: useCustomTooltipClass ? 'tooltip' : null,
3234
disabled: isTooltipDisabled,
3335
animated: animateTooltip,
3436
animationEnterClassName: useCustomAnimationEnterClass ? 'tooltip-enter' : null,
@@ -38,9 +40,20 @@
3840
>
3941
Hover me
4042
</div>
41-
<span class="tooltip__button">Hi! I'm a fancy tooltip!</span>
4243
<form class="settings__form">
4344
<h1>Settings</h1>
45+
<fieldset>
46+
<label>
47+
Default Tooltip Content:
48+
<span class="tooltip__content">Hi! I'm a <i>fancy</i> <strong>tooltip</strong>!</span>
49+
</label>
50+
</fieldset>
51+
<fieldset>
52+
<label>
53+
Tooltip Text Content:
54+
<input type="text" bind:value={textContent} />
55+
</label>
56+
</fieldset>
4457
<fieldset>
4558
<label>
4659
Use Custom Tooltip Class:
@@ -119,6 +132,11 @@
119132
color: white;
120133
}
121134
135+
.tooltip__content {
136+
background-color: yellow;
137+
color: black;
138+
}
139+
122140
.settings__form {
123141
display: flex;
124142
flex-direction: column;

package.json

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,23 @@
44
"author": "Vincent Le Badezet <v.lebadezet@untemps.net>",
55
"license": "MIT",
66
"description": "Svelte action to display a tooltip",
7-
"keywords": [
8-
"tooltip",
9-
"svelte",
10-
"svelte-action",
11-
"action",
12-
"javascript"
13-
],
7+
"keywords": ["tooltip", "svelte", "svelte-action", "action", "javascript"],
148
"private": false,
159
"publishConfig": {
1610
"access": "public"
1711
},
1812
"main": "dist/index.js",
1913
"module": "dist/index.es.js",
2014
"svelte": "dist/index.js",
21-
"files": [
22-
"dist"
23-
],
15+
"files": ["dist"],
2416
"devDependencies": {
2517
"@babel/cli": "^7.12.10",
2618
"@babel/core": "^7.12.10",
2719
"@babel/plugin-proposal-class-properties": "^7.12.1",
2820
"@babel/plugin-transform-runtime": "^7.12.10",
2921
"@babel/preset-env": "^7.12.11",
30-
"@commitlint/cli": "^14.1.0",
31-
"@commitlint/config-conventional": "^14.1.0",
22+
"@commitlint/cli": "^16.1.0",
23+
"@commitlint/config-conventional": "^16.0.0",
3224
"@rollup/plugin-babel": "^5.2.2",
3325
"@rollup/plugin-commonjs": "^21.0.1",
3426
"@rollup/plugin-node-resolve": "^13.0.6",
@@ -68,24 +60,11 @@
6860
"moduleNameMapper": {
6961
"\\.(css|less|scss)$": "identity-obj-proxy"
7062
},
71-
"moduleFileExtensions": [
72-
"js",
73-
"svelte"
74-
],
75-
"setupFilesAfterEnv": [
76-
"<rootDir>/jest/jest.setup.js"
77-
]
78-
},
79-
"husky": {
80-
"hooks": {
81-
"pre-commit": "yarn test:ci && yarn prettier",
82-
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
83-
}
63+
"moduleFileExtensions": ["js", "svelte"],
64+
"setupFilesAfterEnv": ["<rootDir>/jest/jest.setup.js"]
8465
},
8566
"release": {
86-
"branches": [
87-
"main"
88-
],
67+
"branches": ["main"],
8968
"plugins": [
9069
[
9170
"@semantic-release/commit-analyzer",

0 commit comments

Comments
 (0)