feat: Add offset prop (#20)

Author: untemps

README.md

@@ -121,8 +121,9 @@ yarn add @untemps/svelte-use-tooltip
 | `animated`                | boolean | false   | Flag to animate tooltip transitions.                                                                            |
 | `animationEnterClassName` | string  | null    | Class name to apply to the tooltip enter transition.                                                            |
 | `animationLeaveClassName` | string  | null    | Class name to apply to the tooltip leave transition.                                                            |
-| `enterDelay`              | number  | 0       | Delay before showing the tooltip.                                                                               |
-| `leaveDelay`              | number  | 0       | Delay before hiding the tooltip.                                                                                |
+| `enterDelay`              | number  | 0       | Delay before showing the tooltip in milliseconds.                                                               |
+| `leaveDelay`              | number  | 0       | Delay before hiding the tooltip in milliseconds.                                                                                |
+| `offset`                  | number  | 10      | Distance between the tooltip and the target in pixels.                                                          |
 | `disabled`                | boolean | false   | Flag to disable the tooltip content.                                                                            |
 
 ### Content Actions

dev/src/App.svelte

@@ -10,6 +10,7 @@
 	let useCustomAnimationLeaveClass = false
 	let tooltipEnterDelay = 200
 	let tooltipLeaveDelay = 200
+	let tooltipOffset = 10
 
 	const _onTooltipClick = (arg) => {
 		console.log(arg)
@@ -38,6 +39,7 @@
 				animationLeaveClassName: useCustomAnimationLeaveClass ? 'tooltip-leave' : null,
 				enterDelay: tooltipEnterDelay,
 				leaveDelay: tooltipLeaveDelay,
+				offset: tooltipOffset,
 				disabled: isTooltipDisabled
 			}}
 			class="target"
@@ -105,6 +107,12 @@
 					<input type="number" step={100} min={0} bind:value={tooltipLeaveDelay} />
 				</label>
 			</fieldset>
+			<fieldset>
+				<label>
+					Tooltip Offset (px):
+					<input type="number" step={1} min={5} bind:value={tooltipOffset} />
+				</label>
+			</fieldset>
 			<fieldset>
 				<label>
 					Disable Tooltip:
@@ -128,7 +136,8 @@
 		max-width: 640px;
 		display: flex;
 		flex-direction: column;
-		row-gap: 1rem;
+		align-items: center;
+		row-gap: 3rem;
 	}
 
 	.target {
@@ -175,6 +184,7 @@
 	}
 
 	.settings__form input {
+		width: 6rem;
 		margin: 0;
 	}
 

src/Tooltip.js

@@ -1,10 +1,6 @@
 import { DOMObserver } from '@untemps/dom-observer'
 
 class Tooltip {
-	static get GAP() {
-		return 10
-	}
-
 	static #instances = []
 
 	#observer = null
@@ -28,6 +24,7 @@ class Tooltip {
 	#animated = false
 	#animationEnterClassName = null
 	#animationLeaveClassName = null
+	#offset = 10
 
 	static destroy() {
 		Tooltip.#instances.forEach((instance) => {
@@ -49,6 +46,7 @@ class Tooltip {
 		animationLeaveClassName,
 		enterDelay,
 		leaveDelay,
+		offset,
 		disabled
 	) {
 		this.#target = target
@@ -63,6 +61,7 @@ class Tooltip {
 		this.#animationLeaveClassName = animationLeaveClassName || '__tooltip-leave'
 		this.#enterDelay = enterDelay || 0
 		this.#leaveDelay = leaveDelay || 0
+		this.#offset = Math.max(offset || 10, 5)
 
 		this.#observer = new DOMObserver()
 
@@ -89,6 +88,7 @@ class Tooltip {
 		animationLeaveClassName,
 		enterDelay,
 		leaveDelay,
+		offset,
 		disabled
 	) {
 		const hasContentChanged = contentSelector !== this.#contentSelector || content !== this.#content
@@ -108,6 +108,7 @@ class Tooltip {
 		this.#animationLeaveClassName = animationLeaveClassName || '__tooltip-leave'
 		this.#enterDelay = enterDelay || 0
 		this.#leaveDelay = leaveDelay || 0
+		this.#offset = Math.max(offset || 10, 5)
 
 		if (hasContentChanged) {
 			this.#removeTooltipFromTarget()
@@ -174,28 +175,28 @@ class Tooltip {
 		switch (this.#position) {
 			case 'left': {
 				this.#tooltip.style.top = `${-(tooltipHeight - targetHeight) >> 1}px`
-				this.#tooltip.style.left = `${-tooltipWidth - Tooltip.GAP}px`
+				this.#tooltip.style.left = `${-tooltipWidth - this.#offset}px`
 				this.#tooltip.style.bottom = null
 				this.#tooltip.style.right = null
 				break
 			}
 			case 'right': {
 				this.#tooltip.style.top = `${-(tooltipHeight - targetHeight) >> 1}px`
-				this.#tooltip.style.right = `${-tooltipWidth - Tooltip.GAP}px`
+				this.#tooltip.style.right = `${-tooltipWidth - this.#offset}px`
 				this.#tooltip.style.bottom = null
 				this.#tooltip.style.left = null
 				break
 			}
 			case 'bottom': {
 				this.#tooltip.style.left = `${-(tooltipWidth - targetWidth) >> 1}px`
-				this.#tooltip.style.bottom = `${-tooltipHeight - Tooltip.GAP}px`
+				this.#tooltip.style.bottom = `${-tooltipHeight - this.#offset}px`
 				this.#tooltip.style.right = null
 				this.#tooltip.style.top = null
 				break
 			}
 			default: {
 				this.#tooltip.style.left = `${-(tooltipWidth - targetWidth) >> 1}px`
-				this.#tooltip.style.top = `${-tooltipHeight - Tooltip.GAP}px`
+				this.#tooltip.style.top = `${-tooltipHeight - this.#offset}px`
 				this.#tooltip.style.right = null
 				this.#tooltip.style.bottom = null
 			}

src/useTooltip.js

@@ -16,6 +16,7 @@ const useTooltip = (
 		animationLeaveClassName,
 		enterDelay,
 		leaveDelay,
+		offset,
 		disabled,
 	}
 ) => {
@@ -32,6 +33,7 @@ const useTooltip = (
 		animationLeaveClassName,
 		enterDelay,
 		leaveDelay,
+		offset,
 		disabled
 	)
 
@@ -48,6 +50,7 @@ const useTooltip = (
 			animationLeaveClassName: newAnimationLeaveClassName,
 			enterDelay: newEnterDelay,
 			leaveDelay: newLeaveDelay,
+			offset: newOffset,
 			disabled: newDisabled,
 		}) =>
 			tooltip.update(
@@ -62,6 +65,7 @@ const useTooltip = (
 				newAnimationLeaveClassName,
 				newEnterDelay,
 				newLeaveDelay,
+				newOffset,
 				newDisabled
 			),
 		destroy: () => tooltip.destroy(),