From 405b9f9c5ee78080024b7ee6920950a5dbe3589b Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Sat, 22 Jan 2022 21:10:17 +0100
Subject: [PATCH 1/4] feat: Handle position prop, #1

---
 dev/src/App.svelte |  66 ++++++++++---------------
 src/useTooltip.css |  25 +++++++++-
 src/useTooltip.js  | 120 ++++++++++++++++++++-------------------------
 3 files changed, 102 insertions(+), 109 deletions(-)

diff --git a/dev/src/App.svelte b/dev/src/App.svelte
index 7152b86..d4f1d8d 100644
--- a/dev/src/App.svelte
+++ b/dev/src/App.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { useTooltip } from '../../src'
 
+	let tooltipPosition = 'top'
 	let useCustomTooltipClass = false
-	let animateTooltip = false
 
     const _onTooltipClick = (arg, event) => {
 		console.log(arg)
@@ -12,48 +12,38 @@
 <main>
 	<div class="container">
 		<div use:useTooltip={{
-					contentSelector: '.tooltip__content',
+			        position: tooltipPosition,
+					contentSelector: '.tooltip__button',
 					contentClone: false,
 					contentActions: {
-						 '#button1': {
-            eventType: 'mouseenter',
-            callback: (arg) => console.log(arg),
-            callbackParams: ['Haha you\'re hovering the button 1'],
-            closeOnCallback: false
-        },
-        '#button2': {
-            eventType: 'mouseenter',
-            callback: (arg1, arg2) => console.log(arg1, arg2),
-            callbackParams: ['Haha you\'re hovering the', 'button 2'],
-            closeOnCallback: false
-        },
-        '#button2': {
-            eventType: 'click',
-            callback: (arg1, arg2) => console.log(arg1, arg2),
-            callbackParams: ['Haha you\'ve clicked the', 'button 2'],
-            closeOnCallback: true
-        },
+						'*': {
+							eventType: 'click',
+							callback: _onTooltipClick,
+							callbackParams: ['ok'],
+							closeOnCallback: true
+						},
 					},
 					contentClassName: useCustomTooltipClass ? 'tooltip' : null,
 					disabled: false,
-					animated: animateTooltip
-				}} class="tooltip__target">Hover me</div>
-        <span class="tooltip__content">
-			<button id="button1">Action 1</button>
-			<button id="button2">Action 2</button>
-		</span>
+				}} class="target">Hover me</div>
+        <span class="tooltip__button">Hi!</span>
 		<form class="settings__form">
 			<h1>Settings</h1>
+            <fieldset>
+                <label>
+                    Use Custom Tooltip Class:
+                    <input type="checkbox" bind:checked={useCustomTooltipClass} />
+                </label>
+            </fieldset>
 			<fieldset>
 				<label>
-					Use Custom Tooltip Class:
-					<input type="checkbox" bind:checked={useCustomTooltipClass} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Animate tooltip:
-					<input type="checkbox" bind:checked={animateTooltip} />
+					Tooltip Position:
+					<select bind:value={tooltipPosition}>
+                        <option value="left">Left</option>
+                        <option value="right">Right</option>
+                        <option value="top">Top</option>
+                        <option value="bottom">Bottom</option>
+                    </select>
 				</label>
 			</fieldset>
 		</form>
@@ -76,7 +66,7 @@
 		row-gap: 1rem;
 	}
 
-	.tooltip__target {
+	.target {
 		width: 10rem;
         height: 3rem;
         background-color: white;
@@ -87,16 +77,12 @@
         box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
 	}
 
-    .tooltip__target:hover {
+    .target:hover {
         cursor: pointer;
         background-color: black;
         color: white;
     }
 
-	.tooltip__content {
-		color: white
-	}
-
 	.settings__form {
 		display: flex;
 		flex-direction: column;
diff --git a/src/useTooltip.css b/src/useTooltip.css
index e250b00..c3805b7 100644
--- a/src/useTooltip.css
+++ b/src/useTooltip.css
@@ -12,10 +12,31 @@
 .__tooltip__default::after {
     content: "";
     position: absolute;
-    top: 100%;
-    left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
+}
+
+.__tooltip__top::after {
+    bottom: -10px;
+    left: 50%;
     border-color: black transparent transparent transparent;
+}
+
+.__tooltip__bottom::after {
+    top: -10px;
+    left: 50%;
+    border-color: transparent transparent black transparent;
+}
+
+.__tooltip__left::after {
+    top: calc(50% - 5px);
+    right: -10px;
+    border-color: transparent transparent transparent black;
+}
+
+.__tooltip__right::after {
+    top: calc(50% - 5px);
+    left: -5px;
+    border-color: transparent black transparent transparent;
 }
\ No newline at end of file
diff --git a/src/useTooltip.js b/src/useTooltip.js
index dc6632b..d525375 100644
--- a/src/useTooltip.js
+++ b/src/useTooltip.js
@@ -2,26 +2,26 @@ import { DOMObserver } from '@untemps/dom-observer'
 
 import './useTooltip.css'
 
-const useTooltip = (node, { contentSelector, contentClone, contentActions, containerClassName, disabled, animated }) => {
+const useTooltip = (node, { position, contentSelector, contentClone, contentActions, contentClassName, disabled }) => {
 	Tooltip.init(contentSelector, contentClone)
 
-	const tooltip = new Tooltip(node, contentActions, containerClassName, animated)
+	const tooltip = new Tooltip(node, position, contentActions, contentClassName)
 	if (disabled) {
 		tooltip.disable()
 	}
 
 	return {
 		update: ({
+			position: newPosition,
 			contentSelector: newContentSelector,
 			contentClone: newContentClone,
 			contentActions: newContentActions,
-			containerClassName: newContainerClassName,
+			contentClassName: newContentClassName,
 			disabled: newDisabled,
-			animated: newAnimated,
 		}) => {
 			Tooltip.update(newContentSelector, newContentClone)
 
-			tooltip.update(newContentActions, newContainerClassName, newAnimated)
+			tooltip.update(newPosition, newContentActions, newContentClassName)
 			newDisabled ? tooltip.disable() : tooltip.enable()
 		},
 		destroy: () => {
@@ -38,6 +38,7 @@ export class Tooltip {
 	static #instances = []
 
 	#target = null
+	#position = null
 	#actions = null
 	#animated = false
 	#container = null
@@ -45,14 +46,14 @@ export class Tooltip {
 
 	#boundEnterHandler = null
 	#boundLeaveHandler = null
-
-	constructor(target, actions, className, animated) {
+	
+	constructor(target, position, actions, className) {
 		this.#target = target
+		this.#position = position
 		this.#actions = actions
 		this.#container = Tooltip.#tooltip
-		this.#animated = animated
-
-		this.#className = className
+		
+		this.#container?.setAttribute('class', className || `__tooltip__default __tooltip__${this.#position}`)
 
 		this.#activateTarget()
 
@@ -102,23 +103,16 @@ export class Tooltip {
 		Tooltip.#isInitialized = false
 	}
 
-	get #className() {
-		return this.#container?.getAttribute('class')
-	}
-
-	set #className(value) {
-		this.#container?.setAttribute('class', value || '__tooltip__default')
-	}
-
-	update(actions, className, animated) {
+	update(position, actions, className) {
+		this.#position = position
 		this.#actions = actions
-		this.#className = className
-		this.#animated = animated
+		
+		this.#container?.setAttribute('class', className || `__tooltip__default __tooltip__${this.#position}`)
 	}
 
 	destroy() {
 		this.#deactivateTarget()
-		this.#removeContainerFromTarget();
+		this.#removeContainerFromTarget()
 	}
 
 	enable() {
@@ -148,11 +142,7 @@ export class Tooltip {
 		this.disable()
 	}
 
-	async #appendContainerToTarget() {
-		if(this.#animated) {
-			await this.#manageTransition(1)
-		}
-
+	#appendContainerToTarget() {
 		this.#target.appendChild(this.#container)
 
 		if (this.#actions) {
@@ -172,60 +162,56 @@ export class Tooltip {
 		}
 	}
 
-	async #removeContainerFromTarget() {
-		if(this.#animated) {
-			await this.#manageTransition(0)
+	#removeContainerFromTarget() {
+		if (this.#target.contains(this.#container)) {
+			this.#target.removeChild(this.#container)
 		}
 
-		this.#container.remove()
-
 		this.#events.forEach(({ trigger, eventType, listener }) => trigger.removeEventListener(eventType, listener))
 		this.#events = []
 	}
 
-	#manageTransition(direction) {
-		return new Promise((resolve) => {
-			let classToAdd, classToRemove
-			switch(direction) {
-				case 1: {
-					classToAdd = '__tooltip__show'
-					classToRemove = '__tooltip__hide'
+	#onTargetEnter() {
+		this.#appendContainerToTarget()
+
+		Tooltip.#observer.wait(`#tooltip`, null, { events: [DOMObserver.EXIST] }).then(({ node }) => {
+			const { width: targetWidth, height: targetHeight } = this.#target.getBoundingClientRect()
+			const { width: tooltipWidth, height: tooltipHeight } = this.#container.getBoundingClientRect()
+			console.log(this.#position)
+			switch(this.#position) {
+				case 'left': {
+					this.#container.style.top = `${-(tooltipHeight - targetHeight) >> 1}px`
+					this.#container.style.bottom = null
+					this.#container.style.left = `${-tooltipWidth - 6}px`
+					this.#container.style.right = null
+					break
+				}
+				case 'right': {
+					this.#container.style.top = `${-(tooltipHeight - targetHeight) >> 1}px`
+					this.#container.style.bottom = null
+					this.#container.style.right = `${-tooltipWidth - 6}px`
+					this.#container.style.left = null
+					break
+				}
+				case 'bottom': {
+					this.#container.style.left = `${-(tooltipWidth - targetWidth) >> 1}px`
+					this.#container.style.right = null
+					this.#container.style.bottom = `${-tooltipHeight - 6}px`
+					this.#container.style.top = null
 					break
 				}
 				default: {
-					classToAdd = '__tooltip__hide'
-					classToRemove = '__tooltip__show'
+					this.#container.style.left = `${-(tooltipWidth - targetWidth) >> 1}px`
+					this.#container.style.right = null
+					this.#container.style.top = `${-tooltipHeight - 6}px`
+					this.#container.style.bottom = null
 				}
 			}
-			this.#container.classList.add(classToAdd)
-			this.#container.classList.remove(classToRemove)
-
-			if(direction === 1) {
-				resolve()
-			}
-
-			const onTransitionEnd = () => {
-				this.#container.removeEventListener("animationend", onTransitionEnd)
-				this.#container.classList.remove(classToAdd)
-				resolve()
-			}
-			this.#container.addEventListener("animationend", onTransitionEnd)
-		})
-	}
-
-	async #onTargetEnter() {
-		await this.#appendContainerToTarget()
-
-		Tooltip.#observer.wait(`#tooltip`, null, { events: [DOMObserver.EXIST] }).then(({ node }) => {
-			const { width: targetWidth } = this.#target.getBoundingClientRect()
-			const { width: tooltipWidth, height: tooltipHeight } = this.#container.getBoundingClientRect()
-			this.#container.style.left = `${-(tooltipWidth - targetWidth) >> 1}px`
-			this.#container.style.top = `${-tooltipHeight - 6}px`
 		})
 	}
 
-	async #onTargetLeave() {
-		await this.#removeContainerFromTarget()
+	#onTargetLeave() {
+		this.#removeContainerFromTarget()
 	}
 }
 

From e3d74094553853553898c72fcc1e557227458a4f Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Mon, 24 Jan 2022 21:53:53 +0100
Subject: [PATCH 2/4] fix: Fix tooltip enabling management, #1

---
 dev/src/App.svelte | 11 ++++++++--
 src/useTooltip.css |  2 +-
 src/useTooltip.js  | 51 +++++++++++++++++++---------------------------
 3 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/dev/src/App.svelte b/dev/src/App.svelte
index d4f1d8d..204f071 100644
--- a/dev/src/App.svelte
+++ b/dev/src/App.svelte
@@ -3,6 +3,7 @@
 
 	let tooltipPosition = 'top'
 	let useCustomTooltipClass = false
+	let isTooltipDisabled = false
 
     const _onTooltipClick = (arg, event) => {
 		console.log(arg)
@@ -24,9 +25,9 @@
 						},
 					},
 					contentClassName: useCustomTooltipClass ? 'tooltip' : null,
-					disabled: false,
+					disabled: isTooltipDisabled,
 				}} class="target">Hover me</div>
-        <span class="tooltip__button">Hi!</span>
+        <span class="tooltip__button">Hi! I'm a fancy tooltip!</span>
 		<form class="settings__form">
 			<h1>Settings</h1>
             <fieldset>
@@ -46,6 +47,12 @@
                     </select>
 				</label>
 			</fieldset>
+            <fieldset>
+                <label>
+                    Disable Tooltip:
+                    <input type="checkbox" bind:checked={isTooltipDisabled} />
+                </label>
+            </fieldset>
 		</form>
 	</div>
 </main>
diff --git a/src/useTooltip.css b/src/useTooltip.css
index c3805b7..068ca50 100644
--- a/src/useTooltip.css
+++ b/src/useTooltip.css
@@ -1,7 +1,7 @@
 .__tooltip__default {
     position: absolute;
     z-index: 9999;
-    max-width: 120px;
+    max-width: 100%;
     background-color: black;
     color: #fff;
     text-align: center;
diff --git a/src/useTooltip.js b/src/useTooltip.js
index d525375..1203135 100644
--- a/src/useTooltip.js
+++ b/src/useTooltip.js
@@ -5,10 +5,7 @@ import './useTooltip.css'
 const useTooltip = (node, { position, contentSelector, contentClone, contentActions, contentClassName, disabled }) => {
 	Tooltip.init(contentSelector, contentClone)
 
-	const tooltip = new Tooltip(node, position, contentActions, contentClassName)
-	if (disabled) {
-		tooltip.disable()
-	}
+	const tooltip = new Tooltip(node, position, disabled, contentActions, contentClassName)
 
 	return {
 		update: ({
@@ -21,8 +18,7 @@ const useTooltip = (node, { position, contentSelector, contentClone, contentActi
 		}) => {
 			Tooltip.update(newContentSelector, newContentClone)
 
-			tooltip.update(newPosition, newContentActions, newContentClassName)
-			newDisabled ? tooltip.disable() : tooltip.enable()
+			tooltip.update(newPosition, newDisabled, newContentActions, newContentClassName)
 		},
 		destroy: () => {
 			tooltip.destroy()
@@ -39,23 +35,26 @@ export class Tooltip {
 
 	#target = null
 	#position = null
+	#disabled = false
 	#actions = null
-	#animated = false
 	#container = null
 	#events = []
 
 	#boundEnterHandler = null
 	#boundLeaveHandler = null
-	
-	constructor(target, position, actions, className) {
+
+	constructor(target, position, disabled, actions, className) {
 		this.#target = target
 		this.#position = position
 		this.#actions = actions
 		this.#container = Tooltip.#tooltip
 		
 		this.#container?.setAttribute('class', className || `__tooltip__default __tooltip__${this.#position}`)
-
-		this.#activateTarget()
+		
+		disabled ? this.#disable() : this.#enable()
+		
+		this.#target.title = ''
+		this.#target.setAttribute('style', 'position: relative')
 
 		Tooltip.#instances.push(this)
 	}
@@ -103,45 +102,37 @@ export class Tooltip {
 		Tooltip.#isInitialized = false
 	}
 
-	update(position, actions, className) {
+	update(position, disabled, actions, className) {
 		this.#position = position
 		this.#actions = actions
 		
 		this.#container?.setAttribute('class', className || `__tooltip__default __tooltip__${this.#position}`)
+		
+		!!this.#boundEnterHandler ? this.#disable() : this.#enable()
 	}
 
 	destroy() {
-		this.#deactivateTarget()
 		this.#removeContainerFromTarget()
+		
+		this.#disable()
 	}
-
-	enable() {
+	
+	#enable() {
 		this.#boundEnterHandler = this.#onTargetEnter.bind(this)
 		this.#boundLeaveHandler = this.#onTargetLeave.bind(this)
-
+		
 		this.#target.addEventListener('mouseenter', this.#boundEnterHandler)
 		this.#target.addEventListener('mouseleave', this.#boundLeaveHandler)
 	}
-
-	disable() {
+	
+	#disable() {
 		this.#target.removeEventListener('mouseenter', this.#boundEnterHandler)
 		this.#target.removeEventListener('mouseleave', this.#boundLeaveHandler)
-
+		
 		this.#boundEnterHandler = null
 		this.#boundLeaveHandler = null
 	}
 
-	#activateTarget() {
-		this.#target.title = ''
-		this.#target.setAttribute('style', 'position: relative')
-
-		this.enable()
-	}
-
-	#deactivateTarget() {
-		this.disable()
-	}
-
 	#appendContainerToTarget() {
 		this.#target.appendChild(this.#container)
 

From d1c0e08da9ea8adefe8e9585b390b91bc0e91920 Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Mon, 24 Jan 2022 21:55:02 +0100
Subject: [PATCH 3/4] style: Remove console.log, #1

---
 src/useTooltip.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/useTooltip.js b/src/useTooltip.js
index 1203135..38f509e 100644
--- a/src/useTooltip.js
+++ b/src/useTooltip.js
@@ -168,7 +168,6 @@ export class Tooltip {
 		Tooltip.#observer.wait(`#tooltip`, null, { events: [DOMObserver.EXIST] }).then(({ node }) => {
 			const { width: targetWidth, height: targetHeight } = this.#target.getBoundingClientRect()
 			const { width: tooltipWidth, height: tooltipHeight } = this.#container.getBoundingClientRect()
-			console.log(this.#position)
 			switch(this.#position) {
 				case 'left': {
 					this.#container.style.top = `${-(tooltipHeight - targetHeight) >> 1}px`

From 7a3e902b22263472bf719a4662a671f78a13aa02 Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Tue, 25 Jan 2022 09:34:05 +0100
Subject: [PATCH 4/4] fix: Fix enabling status update, #1

---
 src/useTooltip.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/useTooltip.js b/src/useTooltip.js
index 38f509e..df44a23 100644
--- a/src/useTooltip.js
+++ b/src/useTooltip.js
@@ -35,7 +35,6 @@ export class Tooltip {
 
 	#target = null
 	#position = null
-	#disabled = false
 	#actions = null
 	#container = null
 	#events = []
@@ -108,7 +107,11 @@ export class Tooltip {
 		
 		this.#container?.setAttribute('class', className || `__tooltip__default __tooltip__${this.#position}`)
 		
-		!!this.#boundEnterHandler ? this.#disable() : this.#enable()
+		if(!disabled && !this.#boundEnterHandler) {
+			this.#enable()
+		} else if(disabled && !!this.#boundEnterHandler) {
+			this.#disable()
+		}
 	}
 
 	destroy() {