feat: Add content prop (#12)

BREAKING CHANGE: `contentClassName` has been renamed `containerClassName` to be more consistent

Author: untemps

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn test:ci
+yarn prettier

dev/src/App.svelte

@@ -1,14 +1,15 @@
 <script>
 	import { useTooltip } from '../../src'
 
-	let tooltipPosition = 'top'
+	let textContent = null
 	let useCustomTooltipClass = false
+	let tooltipPosition = 'top'
 	let isTooltipDisabled = false
 	let animateTooltip = false
 	let useCustomAnimationEnterClass = false
 	let useCustomAnimationLeaveClass = false
 
-	const _onTooltipClick = (arg, event) => {
+	const _onTooltipClick = (arg) => {
 		console.log(arg)
 	}
 </script>
@@ -18,8 +19,9 @@
 		<div
 			use:useTooltip={{
 				position: tooltipPosition,
-				contentSelector: '.tooltip__button',
-				contentClone: false,
+				content: textContent,
+				contentSelector: !textContent?.length ? '.tooltip__content' : null,
+				contentClone: true,
 				contentActions: {
 					'*': {
 						eventType: 'click',
@@ -28,7 +30,7 @@
 						closeOnCallback: true,
 					},
 				},
-				contentClassName: useCustomTooltipClass ? 'tooltip' : null,
+				containerClassName: useCustomTooltipClass ? 'tooltip' : null,
 				disabled: isTooltipDisabled,
 				animated: animateTooltip,
 				animationEnterClassName: useCustomAnimationEnterClass ? 'tooltip-enter' : null,
@@ -38,9 +40,20 @@
 		>
 			Hover me
 		</div>
-		<span class="tooltip__button">Hi! I'm a fancy tooltip!</span>
 		<form class="settings__form">
 			<h1>Settings</h1>
+			<fieldset>
+				<label>
+					Default Tooltip Content:
+					<span class="tooltip__content">Hi! I'm a <i>fancy</i> <strong>tooltip</strong>!</span>
+				</label>
+			</fieldset>
+			<fieldset>
+				<label>
+					Tooltip Text Content:
+					<input type="text" bind:value={textContent} />
+				</label>
+			</fieldset>
 			<fieldset>
 				<label>
 					Use Custom Tooltip Class:
@@ -119,6 +132,11 @@
 		color: white;
 	}
 
+	.tooltip__content {
+		background-color: yellow;
+		color: black;
+	}
+
 	.settings__form {
 		display: flex;
 		flex-direction: column;

package.json

@@ -4,31 +4,23 @@
 	"author": "Vincent Le Badezet <v.lebadezet@untemps.net>",
 	"license": "MIT",
 	"description": "Svelte action to display a tooltip",
-	"keywords": [
-		"tooltip",
-		"svelte",
-		"svelte-action",
-		"action",
-		"javascript"
-	],
+	"keywords": ["tooltip", "svelte", "svelte-action", "action", "javascript"],
 	"private": false,
 	"publishConfig": {
 		"access": "public"
 	},
 	"main": "dist/index.js",
 	"module": "dist/index.es.js",
 	"svelte": "dist/index.js",
-	"files": [
-		"dist"
-	],
+	"files": ["dist"],
 	"devDependencies": {
 		"@babel/cli": "^7.12.10",
 		"@babel/core": "^7.12.10",
 		"@babel/plugin-proposal-class-properties": "^7.12.1",
 		"@babel/plugin-transform-runtime": "^7.12.10",
 		"@babel/preset-env": "^7.12.11",
-		"@commitlint/cli": "^14.1.0",
-		"@commitlint/config-conventional": "^14.1.0",
+		"@commitlint/cli": "^16.1.0",
+		"@commitlint/config-conventional": "^16.0.0",
 		"@rollup/plugin-babel": "^5.2.2",
 		"@rollup/plugin-commonjs": "^21.0.1",
 		"@rollup/plugin-node-resolve": "^13.0.6",
@@ -68,24 +60,11 @@
 		"moduleNameMapper": {
 			"\\.(css|less|scss)$": "identity-obj-proxy"
 		},
-		"moduleFileExtensions": [
-			"js",
-			"svelte"
-		],
-		"setupFilesAfterEnv": [
-			"<rootDir>/jest/jest.setup.js"
-		]
-	},
-	"husky": {
-		"hooks": {
-			"pre-commit": "yarn test:ci && yarn prettier",
-			"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-		}
+		"moduleFileExtensions": ["js", "svelte"],
+		"setupFilesAfterEnv": ["<rootDir>/jest/jest.setup.js"]
 	},
 	"release": {
-		"branches": [
-			"main"
-		],
+		"branches": ["main"],
 		"plugins": [
 			[
 				"@semantic-release/commit-analyzer",