From 12de2b8ffaf3da674a4741691d7f2e9f634ff8c5 Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Sat, 5 Feb 2022 19:59:58 +0100
Subject: [PATCH 1/2] feat: Allow to set a template element as tooltip content,
 #29

The `contentClone` prop has been removed since it is not needed anymore
---
 README.md                        |  15 +-
 dev/src/App.svelte               |  74 +++---
 jest/jest.setup.js               |  64 ++++-
 src/Tooltip.js                   |  64 ++---
 src/__tests__/useTooltip.test.js | 403 ++++++++++++-------------------
 src/useTooltip.js                |   4 -
 6 files changed, 278 insertions(+), 346 deletions(-)

diff --git a/README.md b/README.md
index 70fe970..9c6f1c0 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,6 @@ yarn add @untemps/svelte-use-tooltip
 
 <div use:useTooltip={{
         contentSelector: '.tooltip__content',
-        contentClone: false,
         contentActions: {
             '*': {
                 eventType: 'click',
@@ -114,7 +113,6 @@ yarn add @untemps/svelte-use-tooltip
 |---------------------------|---------|-------------------|-----------------------------------------------------------------------------------------------------------------|
 | `content`                 | string  | null              | Text content to display in the tooltip.                                                                         |
 | `contentSelector`         | string  | null              | Selector of the content to display in the tooltip.                                                              |
-| `contentClone`            | boolean | false             | Flag to clone the content to display in the tooltip. If false, the content is removed from its previous parent. |
 | `contentActions`          | object  | null              | Configuration of the tooltip actions (see [Content Actions](#content-actions)).                                 |
 | `containerClassName`      | string  | '__tooltip'       | Class name to apply to the tooltip container.                                                                   |
 | `position`                | string  | 'top'             | Position of the tooltip. Available values: 'top', 'bottom', 'left', 'right'                                     |
@@ -126,6 +124,18 @@ yarn add @untemps/svelte-use-tooltip
 | `offset`                  | number  | 10                | Distance between the tooltip and the target in pixels.                                                          |
 | `disabled`                | boolean | false             | Flag to disable the tooltip content.                                                                            |
 
+### Content and Content Selector
+
+The tooltip content can be specified either by the `content` prop or the `contentSelector` prop.
+
+`content` must be a text string that will be displayed as is in the tooltip.
+
+It's useful for most of the use cases of a tooltip however sometimes you need to display some more complex content, with interactive elements or formatted text.  
+
+To do so, you may use the `contentSelector` prop that allows to specify the selector of an element from the DOM.
+
+The best option is to use a [template](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) HTML element although you may also use a plain element. In this case, **it will remain in the DOM and will be clones in the tooltip**.
+
 ### Content Actions
 
 The `contentActions` prop allows to handle interactions within the tooltip content.
@@ -141,7 +151,6 @@ One event by element is possible so far as elements are referenced by selector.
 
 <div use:useTooltip={{
     contentSelector: '#content',
-    contentClone: false,
     contentActions: {
         '#button1': {
             eventType: 'mouseenter',
diff --git a/dev/src/App.svelte b/dev/src/App.svelte
index 568293b..7571392 100644
--- a/dev/src/App.svelte
+++ b/dev/src/App.svelte
@@ -23,8 +23,7 @@
 			use:useTooltip={{
 				position: tooltipPosition,
 				content: tooltipTextContent,
-				contentSelector: !tooltipTextContent?.length ? '.tooltip__content' : null,
-				contentClone: true,
+				contentSelector: !tooltipTextContent?.length ? '#tooltip-template' : null,
 				contentActions: {
 					'*': {
 						eventType: 'click',
@@ -40,20 +39,17 @@
 				enterDelay: tooltipEnterDelay,
 				leaveDelay: tooltipLeaveDelay,
 				offset: tooltipOffset,
-				disabled: isTooltipDisabled
+				disabled: isTooltipDisabled,
 			}}
 			class="target"
 		>
 			Hover me
 		</div>
+		<template id="tooltip-template">
+			<span class="tooltip__content">Hi! I'm a <i>fancy</i> <strong>tooltip</strong>!</span>
+		</template>
 		<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:
@@ -204,36 +200,36 @@
 	}
 
 	:global(.tooltip::after) {
-        content: '';
-        position: absolute;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-	}
-
-    :global(.tooltip-top::after) {
-        bottom: -10px;
-        left: 50%;
-        border-color: #ee7008 transparent transparent transparent;
-    }
-
-    :global(.tooltip-bottom::after) {
-        top: -10px;
-        left: 50%;
-        border-color: transparent transparent #ee7008 transparent;
-    }
-
-    :global(.tooltip-left::after) {
-        top: calc(50% - 5px);
-        right: -10px;
-        border-color: transparent transparent transparent #ee7008;
-    }
-
-    :global(.tooltip-right::after) {
-        top: calc(50% - 5px);
-        left: -5px;
-        border-color: transparent #ee7008 transparent transparent;
-    }
+		content: '';
+		position: absolute;
+		margin-left: -5px;
+		border-width: 5px;
+		border-style: solid;
+	}
+
+	:global(.tooltip-top::after) {
+		bottom: -10px;
+		left: 50%;
+		border-color: #ee7008 transparent transparent transparent;
+	}
+
+	:global(.tooltip-bottom::after) {
+		top: -10px;
+		left: 50%;
+		border-color: transparent transparent #ee7008 transparent;
+	}
+
+	:global(.tooltip-left::after) {
+		top: calc(50% - 5px);
+		right: -10px;
+		border-color: transparent transparent transparent #ee7008;
+	}
+
+	:global(.tooltip-right::after) {
+		top: calc(50% - 5px);
+		left: -5px;
+		border-color: transparent #ee7008 transparent transparent;
+	}
 
 	@keyframes fadeIn {
 		from {
diff --git a/jest/jest.setup.js b/jest/jest.setup.js
index 658c566..900d906 100644
--- a/jest/jest.setup.js
+++ b/jest/jest.setup.js
@@ -1,11 +1,13 @@
+import { fireEvent } from '@testing-library/svelte'
+
 const { toBeInTheDocument, toHaveAttribute, toHaveStyle } = require('@testing-library/jest-dom/matchers')
 import '@testing-library/jest-dom/extend-expect'
 
 expect.extend({ toBeInTheDocument, toHaveAttribute, toHaveStyle })
 
-global._createElement = (id = 'foo', parent, attrs) => {
-	const el = document.createElement('div')
-	el.setAttribute('id', id)
+global._createAndAddElement = (tagName, attrs, parent) => {
+	const el = document.createElement(tagName)
+	el.setAttribute('id', 'foo')
 	for (let key in attrs) {
 		el.setAttribute(key, attrs[key])
 	}
@@ -13,7 +15,7 @@ global._createElement = (id = 'foo', parent, attrs) => {
 	return el
 }
 
-global._removeElement = (selector) => {
+global._destroyElement = (selector) => {
 	const el = document.querySelector(selector)
 	if (!!el) {
 		el.parentNode.removeChild(el)
@@ -27,6 +29,60 @@ global._modifyElement = (selector, attributeName, attributeValue) => {
 	}
 }
 
+global._getElement = (selector) => {
+	return document.querySelector(selector)
+}
+
 global._sleep = (ms = 100) => {
 	return new Promise((resolve) => setTimeout(resolve, ms))
 }
+
+global._enter = async (trigger) =>
+	new Promise(async (resolve) => {
+		await fireEvent.mouseOver(trigger) // fireEvent.mouseEnter only works if mouseOver is triggered before
+		await fireEvent.mouseEnter(trigger)
+		await _sleep(1)
+		resolve()
+	})
+
+global._leave = async (trigger) =>
+	new Promise(async (resolve) => {
+		await fireEvent.mouseLeave(trigger)
+		await _sleep(1)
+		resolve()
+	})
+
+global._enterAndLeave = async (trigger) =>
+	new Promise(async (resolve) => {
+		await _enter(trigger)
+		await _leave(trigger)
+		resolve()
+	})
+
+global._focus = async (trigger) =>
+	new Promise(async (resolve) => {
+		await fireEvent.focusIn(trigger)
+		await _sleep(1)
+		resolve()
+	})
+
+global._blur = async (trigger) =>
+	new Promise(async (resolve) => {
+		await fireEvent.focusOut(trigger)
+		await _sleep(1)
+		resolve()
+	})
+
+global._focusAndBlur = async (trigger) =>
+	new Promise(async (resolve) => {
+		await _focus(trigger)
+		await _blur(trigger)
+		resolve()
+	})
+
+global._keyDown = async (trigger, key) =>
+	new Promise(async (resolve) => {
+		await fireEvent.keyDown(trigger, key || { key: 'Escape', code: 'Escape', charCode: 27 })
+		await _sleep(1)
+		resolve()
+	})
diff --git a/src/Tooltip.js b/src/Tooltip.js
index de386b6..f270cf3 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -13,13 +13,12 @@ class Tooltip {
 
 	#boundEnterHandler = null
 	#boundLeaveHandler = null
-	#boundWindowChangeHandler = null
+	#boundKeyDownHandler = null
 
 	#target = null
 	#content = null
 	#contentSelector = null
 	#contentActions = null
-	#contentClone = false
 	#containerClassName = null
 	#position = null
 	#animated = false
@@ -38,7 +37,6 @@ class Tooltip {
 		target,
 		content,
 		contentSelector,
-		contentClone,
 		contentActions,
 		containerClassName,
 		position,
@@ -53,7 +51,6 @@ class Tooltip {
 		this.#target = target
 		this.#content = content
 		this.#contentSelector = contentSelector
-		this.#contentClone = contentClone || false
 		this.#contentActions = contentActions
 		this.#containerClassName = containerClassName
 		this.#position = position || 'top'
@@ -72,7 +69,7 @@ class Tooltip {
 		this.#target.setAttribute('style', 'position: relative')
 		this.#target.setAttribute('aria-describedby', 'tooltip')
 
-		disabled ? this.#disable() : this.#enable()
+		disabled ? this.#disableTarget() : this.#enableTarget()
 
 		Tooltip.#instances.push(this)
 	}
@@ -80,7 +77,6 @@ class Tooltip {
 	update(
 		content,
 		contentSelector,
-		contentClone,
 		contentActions,
 		containerClassName,
 		position,
@@ -101,7 +97,6 @@ class Tooltip {
 
 		this.#content = content
 		this.#contentSelector = contentSelector
-		this.#contentClone = contentClone || false
 		this.#contentActions = contentActions
 		this.#containerClassName = containerClassName
 		this.#position = position || 'top'
@@ -122,14 +117,14 @@ class Tooltip {
 		}
 
 		if (hasToDisableTarget) {
-			this.#disable()
+			this.#disableTarget()
 		} else if (hasToEnableTarget) {
-			this.#enable()
+			this.#enableTarget()
 		}
 	}
 
-	async destroy() {
-		await this.#removeTooltipFromTarget()
+	destroy() {
+		this.#removeTooltipFromTarget()
 
 		this.#disableTarget()
 
@@ -139,32 +134,16 @@ class Tooltip {
 		this.#observer = null
 	}
 
-	#enable() {
-		this.#enableTarget()
-		this.#enableWindow()
-	}
-
 	#enableTarget() {
 		this.#boundEnterHandler = this.#onTargetEnter.bind(this)
 		this.#boundLeaveHandler = this.#onTargetLeave.bind(this)
+		this.#boundKeyDownHandler = this.#onTargetKeyDown.bind(this)
 
 		this.#target.addEventListener('mouseenter', this.#boundEnterHandler)
 		this.#target.addEventListener('mouseleave', this.#boundLeaveHandler)
 		this.#target.addEventListener('focusin', this.#boundEnterHandler)
 		this.#target.addEventListener('focusout', this.#boundLeaveHandler)
-	}
-
-	#enableWindow() {
-		this.#boundWindowChangeHandler = this.#onWindowChange.bind(this)
-
-		window.addEventListener('keydown', this.#boundWindowChangeHandler)
-		window.addEventListener('resize', this.#boundWindowChangeHandler)
-		window.addEventListener('scroll', this.#boundWindowChangeHandler)
-	}
-
-	#disable() {
-		this.#disableTarget()
-		this.#disableWindow()
+		window.addEventListener('keydown', this.#boundKeyDownHandler)
 	}
 
 	#disableTarget() {
@@ -172,17 +151,11 @@ class Tooltip {
 		this.#target.removeEventListener('mouseleave', this.#boundLeaveHandler)
 		this.#target.removeEventListener('focusin', this.#boundEnterHandler)
 		this.#target.removeEventListener('focusout', this.#boundLeaveHandler)
+		window.removeEventListener('keydown', this.#boundKeyDownHandler)
 
 		this.#boundEnterHandler = null
 		this.#boundLeaveHandler = null
-	}
-
-	#disableWindow() {
-		window.removeEventListener('keydown', this.#boundWindowChangeHandler)
-		window.removeEventListener('resize', this.#boundWindowChangeHandler)
-		window.removeEventListener('scroll', this.#boundWindowChangeHandler)
-
-		this.#boundWindowChangeHandler = null
+		this.#boundKeyDownHandler = null
 	}
 
 	#createTooltip() {
@@ -195,9 +168,9 @@ class Tooltip {
 			this.#observer
 				.wait(this.#contentSelector, null, { events: [DOMObserver.EXIST, DOMObserver.ADD] })
 				.then(({ node }) => {
-					const child = this.#contentClone ? node.cloneNode(true) : node
+					const child = node.content ? node.content.firstElementChild : node
 					child.setAttribute('style', 'position: relative')
-					this.#tooltip.appendChild(child)
+					this.#tooltip.appendChild(child.cloneNode(true))
 				})
 		} else if (this.#content) {
 			const child = document.createTextNode(this.#content)
@@ -367,16 +340,9 @@ class Tooltip {
 		await this.#removeTooltipFromTarget()
 	}
 
-	async #onWindowChange(e) {
-		if (
-			this.#tooltip &&
-			this.#tooltip.parentNode &&
-			(e.type !== 'keydown' ||
-				(e.type === 'keydown' && e.key === 'Escape') ||
-				e.key === 'Esc' ||
-				e.keyCode === 27)
-		) {
-			await this.#removeTooltipFromTarget()
+	async #onTargetKeyDown(e) {
+		if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) {
+			await this.#onTargetLeave()
 		}
 	}
 }
diff --git a/src/__tests__/useTooltip.test.js b/src/__tests__/useTooltip.test.js
index d9d005e..34b23ca 100644
--- a/src/__tests__/useTooltip.test.js
+++ b/src/__tests__/useTooltip.test.js
@@ -7,79 +7,26 @@ import { fireEvent } from '@testing-library/svelte'
 import useTooltip from '../useTooltip'
 import Tooltip from '../Tooltip'
 
+const initTarget = (id) => {
+	return _createAndAddElement('div', { id, class: 'bar' })
+}
+
+const initTemplate = (id) => {
+	const template = _createAndAddElement('template', { id })
+	const content = _createAndAddElement('div', { id: 'content', class: 'foo' })
+	template.content.appendChild(content)
+	return template
+}
+
 describe('useTooltip', () => {
 	let target,
 		template,
 		options,
 		action = null
 
-	const _enter = async () =>
-		new Promise(async (resolve) => {
-			await fireEvent.mouseOver(target) // fireEvent.mouseEnter only works if mouseOver is triggered before
-			await fireEvent.mouseEnter(target)
-			await _sleep(1)
-			resolve()
-		})
-
-	const _leave = async () =>
-		new Promise(async (resolve) => {
-			await fireEvent.mouseLeave(target)
-			await _sleep(1)
-			resolve()
-		})
-
-	const _enterAndLeave = async () =>
-		new Promise(async (resolve) => {
-			await _enter()
-			await _leave()
-			resolve()
-		})
-
-	const _focus = async () =>
-		new Promise(async (resolve) => {
-			await fireEvent.focusIn(target)
-			await _sleep(1)
-			resolve()
-		})
-
-	const _blur = async () =>
-		new Promise(async (resolve) => {
-			await fireEvent.focusOut(target)
-			await _sleep(1)
-			resolve()
-		})
-
-	const _focusAndBlur = async () =>
-		new Promise(async (resolve) => {
-			await _focus()
-			await _blur()
-			resolve()
-		})
-
-	const _keyDown = async (key) =>
-		new Promise(async (resolve) => {
-			await fireEvent.keyDown(target, key || { key: 'Escape', code: 'Escape', keyCode: 27 })
-			await _sleep(1)
-			resolve()
-		})
-
-	const _scroll = async () =>
-		new Promise(async (resolve) => {
-			await fireEvent.scroll(window)
-			await _sleep(1)
-			resolve()
-		})
-
-	const _resize = async () =>
-		new Promise(async (resolve) => {
-			await fireEvent(window, new Event('resize'))
-			await _sleep(1)
-			resolve()
-		})
-
 	beforeEach(() => {
-		target = _createElement('target', null, { class: 'bar' })
-		template = _createElement('template')
+		target = initTarget('target')
+		template = initTemplate('template')
 		options = {
 			contentSelector: '#template',
 			contentActions: {
@@ -89,7 +36,6 @@ describe('useTooltip', () => {
 					callbackParams: ['foo'],
 				},
 			},
-			disabled: false,
 		}
 	})
 
@@ -97,8 +43,8 @@ describe('useTooltip', () => {
 		action.destroy()
 		action = null
 
-		_removeElement('#target')
-		_removeElement('#template')
+		_destroyElement('#target')
+		_destroyElement('#template')
 
 		target = null
 		template = null
@@ -111,53 +57,36 @@ describe('useTooltip', () => {
 		describe('init', () => {
 			it('Shows tooltip on mouse enter', async () => {
 				action = useTooltip(target, options)
-				await _enter()
-				expect(template).toBeInTheDocument()
+				await _enter(target)
+				expect(_getElement('#content')).toBeInTheDocument()
 			})
 
 			it('Hides tooltip on mouse leave', async () => {
 				action = useTooltip(target, options)
-				await _enterAndLeave()
-				expect(template).not.toBeInTheDocument()
+				await _enterAndLeave(target)
+				expect(_getElement('#content')).not.toBeInTheDocument()
 			})
 
 			it('Hides tooltip on escape key down', async () => {
 				action = useTooltip(target, options)
-				await _enter()
-				expect(template).toBeInTheDocument()
-				await _keyDown()
-				expect(template).not.toBeInTheDocument()
-			})
-
-			it('Hides tooltip on scroll', async () => {
-				action = useTooltip(target, options)
-				await _enter()
-				expect(template).toBeInTheDocument()
-				await _scroll()
-				expect(template).not.toBeInTheDocument()
-			})
-
-			it('Hides tooltip on resize', async () => {
-				action = useTooltip(target, options)
-				await _enter()
-				expect(template).toBeInTheDocument()
-				await _resize()
-				expect(template).not.toBeInTheDocument()
+				await _enter(target)
+				await _keyDown(target)
+				expect(_getElement('#content')).not.toBeInTheDocument()
 			})
 		})
 
 		describe('update', () => {
 			afterEach(() => {
-				_removeElement('#new-template')
+				_destroyElement('#new-template')
 			})
 
 			it('Shows tooltip on mouse enter', async () => {
 				action = useTooltip(target, options)
-				const newTemplate = _createElement('new-template')
+				const newTemplate = _createAndAddElement('div', { id: 'new-template' })
 				action.update({
 					contentSelector: '#new-template',
 				})
-				await _enter()
+				await _enter(target)
 				expect(newTemplate).toBeInTheDocument()
 			})
 		})
@@ -165,21 +94,21 @@ describe('useTooltip', () => {
 		describe('focus', () => {
 			it('Shows tooltip on focus in', async () => {
 				action = useTooltip(target, options)
-				await _focus()
-				expect(template).toBeInTheDocument()
+				await _focus(target)
+				expect(_getElement('#content')).toBeInTheDocument()
 			})
 
 			it('Hides tooltip on focus out', async () => {
 				action = useTooltip(target, options)
-				await _focusAndBlur()
-				expect(template).not.toBeInTheDocument()
+				await _focusAndBlur(target)
+				expect(_getElement('#content')).not.toBeInTheDocument()
 			})
 
 			it('Hides tooltip on escape key down', async () => {
 				action = useTooltip(target, options)
-				await _focus()
-				await _keyDown()
-				expect(template).not.toBeInTheDocument()
+				await _focus(target)
+				await _keyDown(target)
+				expect(_getElement('#content')).not.toBeInTheDocument()
 			})
 		})
 	})
@@ -187,9 +116,9 @@ describe('useTooltip', () => {
 	describe('useTooltip lifecycle', () => {
 		it('Destroys tooltip', async () => {
 			action = useTooltip(target, options)
-			action.destroy()
-			await _enter()
-			expect(template).not.toBeVisible()
+			action.destroy(target)
+			await _enter(target)
+			expect(_getElement('#content')).not.toBeInTheDocument()
 		})
 	})
 
@@ -201,7 +130,7 @@ describe('useTooltip', () => {
 				contentSelector: null,
 				content,
 			})
-			await _enter()
+			await _enter(target)
 			expect(target).toHaveTextContent(content)
 		})
 
@@ -211,26 +140,9 @@ describe('useTooltip', () => {
 				...options,
 				content,
 			})
-			await _enter()
+			await _enter(target)
 			expect(target).not.toHaveTextContent(content)
-			expect(template).toBeInTheDocument()
-		})
-	})
-
-	describe('useTooltip props: contentClone', () => {
-		it('Does not clone content element', async () => {
-			action = useTooltip(target, options)
-			await _sleep(1)
-			expect(template).not.toBeVisible()
-		})
-
-		it('Clones content element', async () => {
-			action = useTooltip(target, {
-				...options,
-				contentClone: true,
-			})
-			await _sleep(1)
-			expect(template).toBeVisible()
+			expect(_getElement('#content')).toBeInTheDocument()
 		})
 	})
 
@@ -238,56 +150,37 @@ describe('useTooltip', () => {
 		it('Triggers callback on tooltip click', async () => {
 			action = useTooltip(target, options)
 			const contentAction = options.contentActions['*']
-			await _enter()
-			await fireEvent.click(template)
-			expect(contentAction.callback).toHaveBeenCalledWith(contentAction.callbackParams[0], expect.any(Event))
-			expect(template).toBeInTheDocument()
-		})
-
-		it('Triggers callback on element click within tooltip', async () => {
-			const newTemplate = _createElement('new-template')
-			const clickableElement = _createElement('clickable-element', newTemplate)
-			const contentActions = {
-				'#clickable-element': {
-					eventType: 'click',
-					callback: jest.fn(),
-					callbackParams: ['foo'],
-				},
-			}
-			action = useTooltip(target, {
-				...options,
-				contentSelector: '#new-template',
-				contentActions,
-			})
-			const contentAction = contentActions['#clickable-element']
-			await _enter()
-			await fireEvent.click(clickableElement)
+			await _enter(target)
+			const content = _getElement('#content')
+			await fireEvent.click(content)
 			expect(contentAction.callback).toHaveBeenCalledWith(contentAction.callbackParams[0], expect.any(Event))
-			expect(newTemplate).toBeInTheDocument()
+			expect(content).toBeInTheDocument()
 		})
 
 		it('Closes tooltip after triggering callback', async () => {
 			action = useTooltip(target, options)
 			options.contentActions['*'].closeOnCallback = true
 			const contentAction = options.contentActions['*']
-			await _enter()
-			await fireEvent.click(template)
+			await _enter(target)
+			const content = _getElement('#content')
+			await fireEvent.click(content)
 			expect(contentAction.callback).toHaveBeenCalledWith(contentAction.callbackParams[0], expect.any(Event))
-			expect(template).not.toBeInTheDocument()
-			await fireEvent.animationEnd(template.parentNode)
-			expect(template).not.toBeInTheDocument()
+			expect(content).not.toBeInTheDocument()
+			await fireEvent.animationEnd(content.parentNode)
+			expect(content).not.toBeInTheDocument()
 		})
 
 		it('Closes tooltip after triggering callback when animated', async () => {
 			action = useTooltip(target, { ...options, animated: true })
 			options.contentActions['*'].closeOnCallback = true
 			const contentAction = options.contentActions['*']
-			await _enter()
-			await fireEvent.click(template)
+			await _enter(target)
+			const content = _getElement('#content')
+			await fireEvent.click(content)
 			expect(contentAction.callback).toHaveBeenCalledWith(contentAction.callbackParams[0], expect.any(Event))
-			expect(template).toBeInTheDocument()
-			await fireEvent.animationEnd(template.parentNode)
-			expect(template).not.toBeInTheDocument()
+			expect(content).toBeInTheDocument()
+			await fireEvent.animationEnd(content.parentNode)
+			expect(content).not.toBeInTheDocument()
 		})
 
 		it('Triggers new callback on tooltip click after update', async () => {
@@ -305,8 +198,8 @@ describe('useTooltip', () => {
 			}
 			const contentAction = newOptions.contentActions['*']
 			action.update(newOptions)
-			await _enter()
-			await fireEvent.click(template)
+			await _enter(target)
+			await fireEvent.click(_getElement('#content'))
 			expect(contentAction.callback).toHaveBeenCalledWith(
 				contentAction.callbackParams[0],
 				contentAction.callbackParams[1],
@@ -318,8 +211,8 @@ describe('useTooltip', () => {
 	describe('useTooltip props: containerClassName', () => {
 		it('Sets tooltip default class', async () => {
 			action = useTooltip(target, options)
-			await _enter()
-			expect(template.parentNode).toHaveClass('__tooltip')
+			await _enter(target)
+			expect(_getElement('#content').parentNode).toHaveClass('__tooltip')
 		})
 
 		it('Updates tooltip class', async () => {
@@ -327,14 +220,14 @@ describe('useTooltip', () => {
 			action.update({
 				containerClassName: '__custom-tooltip',
 			})
-			await _enter()
-			expect(template.parentNode).toHaveClass('__custom-tooltip')
+			await _enter(target)
+			expect(_getElement('#content').parentNode).toHaveClass('__custom-tooltip')
 		})
 
 		it('Sets tooltip custom class', async () => {
 			action = useTooltip(target, { ...options, containerClassName: '__custom-tooltip' })
-			await _enter()
-			expect(template.parentNode).toHaveClass('__custom-tooltip')
+			await _enter(target)
+			expect(_getElement('#content').parentNode).toHaveClass('__custom-tooltip')
 		})
 	})
 
@@ -344,8 +237,8 @@ describe('useTooltip', () => {
 				...options,
 				disabled: true,
 			})
-			await _enter()
-			expect(template).not.toBeVisible()
+			await _enter(target)
+			expect(_getElement('#content')).not.toBeInTheDocument()
 		})
 
 		it('Disables tooltip after update', async () => {
@@ -353,8 +246,8 @@ describe('useTooltip', () => {
 			action.update({
 				disabled: true,
 			})
-			await _enter()
-			expect(template).not.toBeVisible()
+			await _enter(target)
+			expect(_getElement('#content')).not.toBeInTheDocument()
 		})
 
 		it('Enables tooltip after update', async () => {
@@ -365,8 +258,8 @@ describe('useTooltip', () => {
 			action.update({
 				disabled: false,
 			})
-			await _enter()
-			expect(template).toBeVisible()
+			await _enter(target)
+			expect(_getElement('#content')).toBeInTheDocument()
 		})
 	})
 
@@ -376,12 +269,13 @@ describe('useTooltip', () => {
 				...options,
 				position: 'left',
 			})
-			await _enter()
-			expect(template.parentNode.style.left).not.toHaveLength(0)
-			expect(template.parentNode.style.right).toHaveLength(0)
-			expect(template.parentNode.style.top).not.toHaveLength(0)
-			expect(template.parentNode.style.bottom).toHaveLength(0)
-			expect(template.parentNode).toHaveClass('__tooltip-left')
+			await _enter(target)
+			const content = _getElement('#content')
+			expect(content.parentNode.style.left).not.toHaveLength(0)
+			expect(content.parentNode.style.right).toHaveLength(0)
+			expect(content.parentNode.style.top).not.toHaveLength(0)
+			expect(content.parentNode.style.bottom).toHaveLength(0)
+			expect(content.parentNode).toHaveClass('__tooltip-left')
 		})
 
 		it('Positions tooltip on the left after update', async () => {
@@ -389,13 +283,14 @@ describe('useTooltip', () => {
 			action.update({
 				position: 'left',
 			})
-			await _enter()
-			expect(template.parentNode.style.left).not.toHaveLength(0)
-			expect(template.parentNode.style.right).toHaveLength(0)
-			expect(template.parentNode.style.top).not.toHaveLength(0)
-			expect(template.parentNode.style.bottom).toHaveLength(0)
-			expect(template.parentNode).not.toHaveClass('__tooltip-top')
-			expect(template.parentNode).toHaveClass('__tooltip-left')
+			await _enter(target)
+			const content = _getElement('#content')
+			expect(content.parentNode.style.left).not.toHaveLength(0)
+			expect(content.parentNode.style.right).toHaveLength(0)
+			expect(content.parentNode.style.top).not.toHaveLength(0)
+			expect(content.parentNode.style.bottom).toHaveLength(0)
+			expect(content.parentNode).not.toHaveClass('__tooltip-top')
+			expect(content.parentNode).toHaveClass('__tooltip-left')
 		})
 
 		it('Positions tooltip on the right', async () => {
@@ -403,12 +298,13 @@ describe('useTooltip', () => {
 				...options,
 				position: 'right',
 			})
-			await _enter()
-			expect(template.parentNode.style.left).toHaveLength(0)
-			expect(template.parentNode.style.right).not.toHaveLength(0)
-			expect(template.parentNode.style.top).not.toHaveLength(0)
-			expect(template.parentNode.style.bottom).toHaveLength(0)
-			expect(template.parentNode).toHaveClass('__tooltip-right')
+			await _enter(target)
+			const content = _getElement('#content')
+			expect(content.parentNode.style.left).toHaveLength(0)
+			expect(content.parentNode.style.right).not.toHaveLength(0)
+			expect(content.parentNode.style.top).not.toHaveLength(0)
+			expect(content.parentNode.style.bottom).toHaveLength(0)
+			expect(content.parentNode).toHaveClass('__tooltip-right')
 		})
 
 		it('Positions tooltip on the right after update', async () => {
@@ -416,23 +312,25 @@ describe('useTooltip', () => {
 			action.update({
 				position: 'right',
 			})
-			await _enter()
-			expect(template.parentNode.style.left).toHaveLength(0)
-			expect(template.parentNode.style.right).not.toHaveLength(0)
-			expect(template.parentNode.style.top).not.toHaveLength(0)
-			expect(template.parentNode.style.bottom).toHaveLength(0)
-			expect(template.parentNode).not.toHaveClass('__tooltip-top')
-			expect(template.parentNode).toHaveClass('__tooltip-right')
+			await _enter(target)
+			const content = _getElement('#content')
+			expect(content.parentNode.style.left).toHaveLength(0)
+			expect(content.parentNode.style.right).not.toHaveLength(0)
+			expect(content.parentNode.style.top).not.toHaveLength(0)
+			expect(content.parentNode.style.bottom).toHaveLength(0)
+			expect(content.parentNode).not.toHaveClass('__tooltip-top')
+			expect(content.parentNode).toHaveClass('__tooltip-right')
 		})
 
 		it('Positions tooltip at the top', async () => {
 			action = useTooltip(target, options)
-			await _enter()
-			expect(template.parentNode.style.left).not.toHaveLength(0)
-			expect(template.parentNode.style.right).toHaveLength(0)
-			expect(template.parentNode.style.top).not.toHaveLength(0)
-			expect(template.parentNode.style.bottom).toHaveLength(0)
-			expect(template.parentNode).toHaveClass('__tooltip-top')
+			await _enter(target)
+			const content = _getElement('#content')
+			expect(content.parentNode.style.left).not.toHaveLength(0)
+			expect(content.parentNode.style.right).toHaveLength(0)
+			expect(content.parentNode.style.top).not.toHaveLength(0)
+			expect(content.parentNode.style.bottom).toHaveLength(0)
+			expect(content.parentNode).toHaveClass('__tooltip-top')
 		})
 
 		it('Positions tooltip at the top after update', async () => {
@@ -443,13 +341,14 @@ describe('useTooltip', () => {
 			action.update({
 				position: 'top',
 			})
-			await _enter()
-			expect(template.parentNode.style.left).not.toHaveLength(0)
-			expect(template.parentNode.style.right).toHaveLength(0)
-			expect(template.parentNode.style.top).not.toHaveLength(0)
-			expect(template.parentNode.style.bottom).toHaveLength(0)
-			expect(template.parentNode).not.toHaveClass('__tooltip-left')
-			expect(template.parentNode).toHaveClass('__tooltip-top')
+			await _enter(target)
+			const content = _getElement('#content')
+			expect(content.parentNode.style.left).not.toHaveLength(0)
+			expect(content.parentNode.style.right).toHaveLength(0)
+			expect(content.parentNode.style.top).not.toHaveLength(0)
+			expect(content.parentNode.style.bottom).toHaveLength(0)
+			expect(content.parentNode).not.toHaveClass('__tooltip-left')
+			expect(content.parentNode).toHaveClass('__tooltip-top')
 		})
 
 		it('Positions tooltip at the bottom', async () => {
@@ -457,12 +356,13 @@ describe('useTooltip', () => {
 				...options,
 				position: 'bottom',
 			})
-			await _enter()
-			expect(template.parentNode.style.left).not.toHaveLength(0)
-			expect(template.parentNode.style.right).toHaveLength(0)
-			expect(template.parentNode.style.top).toHaveLength(0)
-			expect(template.parentNode.style.bottom).not.toHaveLength(0)
-			expect(template.parentNode).toHaveClass('__tooltip-bottom')
+			await _enter(target)
+			const content = _getElement('#content')
+			expect(content.parentNode.style.left).not.toHaveLength(0)
+			expect(content.parentNode.style.right).toHaveLength(0)
+			expect(content.parentNode.style.top).toHaveLength(0)
+			expect(content.parentNode.style.bottom).not.toHaveLength(0)
+			expect(content.parentNode).toHaveClass('__tooltip-bottom')
 		})
 
 		it('Positions tooltip at the bottom after update', async () => {
@@ -470,13 +370,14 @@ describe('useTooltip', () => {
 			action.update({
 				position: 'bottom',
 			})
-			await _enter()
-			expect(template.parentNode.style.left).not.toHaveLength(0)
-			expect(template.parentNode.style.right).toHaveLength(0)
-			expect(template.parentNode.style.top).toHaveLength(0)
-			expect(template.parentNode.style.bottom).not.toHaveLength(0)
-			expect(template.parentNode).not.toHaveClass('__tooltip-top')
-			expect(template.parentNode).toHaveClass('__tooltip-bottom')
+			await _enter(target)
+			const content = _getElement('#content')
+			expect(content.parentNode.style.left).not.toHaveLength(0)
+			expect(content.parentNode.style.right).toHaveLength(0)
+			expect(content.parentNode.style.top).toHaveLength(0)
+			expect(content.parentNode.style.bottom).not.toHaveLength(0)
+			expect(content.parentNode).not.toHaveClass('__tooltip-top')
+			expect(content.parentNode).toHaveClass('__tooltip-bottom')
 		})
 	})
 
@@ -486,10 +387,12 @@ describe('useTooltip', () => {
 				...options,
 				enterDelay: 50,
 			})
-			await _enter()
-			expect(template).not.toBeInTheDocument()
+			await _enter(target)
+			let content = _getElement('#content')
+			expect(content).toBeNull()
 			await _sleep(100)
-			expect(template).toBeInTheDocument()
+			content = _getElement('#content')
+			expect(content).toBeInTheDocument()
 		})
 
 		it('Delays tooltip disappearance after update', async () => {
@@ -497,11 +400,13 @@ describe('useTooltip', () => {
 			action.update({
 				enterDelay: 150,
 			})
-			await _enter()
+			await _enter(target)
 			await _sleep(100)
-			expect(template).not.toBeInTheDocument()
+			let content = _getElement('#content')
+			expect(content).toBeNull()
 			await _sleep(100)
-			expect(template).toBeInTheDocument()
+			content = _getElement('#content')
+			expect(content).toBeInTheDocument()
 		})
 	})
 
@@ -511,10 +416,11 @@ describe('useTooltip', () => {
 				...options,
 				leaveDelay: 50,
 			})
-			await _enterAndLeave()
-			expect(template).toBeInTheDocument()
+			await _enterAndLeave(target)
+			const content = _getElement('#content')
+			expect(content).toBeInTheDocument()
 			await _sleep(100)
-			expect(template).not.toBeInTheDocument()
+			expect(content).not.toBeInTheDocument()
 		})
 
 		it('Delays tooltip disappearance after update', async () => {
@@ -522,11 +428,12 @@ describe('useTooltip', () => {
 			action.update({
 				leaveDelay: 150,
 			})
-			await _enterAndLeave()
+			await _enterAndLeave(target)
 			await _sleep(100)
-			expect(template).toBeInTheDocument()
+			const content = _getElement('#content')
+			expect(content).toBeInTheDocument()
 			await _sleep(100)
-			expect(template).not.toBeInTheDocument()
+			expect(content).not.toBeInTheDocument()
 		})
 	})
 
@@ -536,11 +443,12 @@ describe('useTooltip', () => {
 				...options,
 				animated: true,
 			})
-			await _enterAndLeave()
-			expect(template).toBeInTheDocument()
-			await fireEvent.animationEnd(template.parentNode)
+			await _enterAndLeave(target)
+			const content = _getElement('#content')
+			expect(content).toBeInTheDocument()
+			await fireEvent.animationEnd(content.parentNode)
 			await _sleep(10)
-			expect(template).not.toBeInTheDocument()
+			expect(content).not.toBeInTheDocument()
 		})
 
 		it('Animates tooltip disappearance after update', async () => {
@@ -548,11 +456,12 @@ describe('useTooltip', () => {
 			action.update({
 				animated: true,
 			})
-			await _enterAndLeave()
-			expect(template).toBeInTheDocument()
-			await fireEvent.animationEnd(template.parentNode)
+			await _enterAndLeave(target)
+			const content = _getElement('#content')
+			expect(content).toBeInTheDocument()
+			await fireEvent.animationEnd(content.parentNode)
 			await _sleep(10)
-			expect(template).not.toBeInTheDocument()
+			expect(content).not.toBeInTheDocument()
 		})
 	})
 })
diff --git a/src/useTooltip.js b/src/useTooltip.js
index 1e89586..68ca90c 100644
--- a/src/useTooltip.js
+++ b/src/useTooltip.js
@@ -7,7 +7,6 @@ const useTooltip = (
 	{
 		content,
 		contentSelector,
-		contentClone,
 		contentActions,
 		containerClassName,
 		position,
@@ -24,7 +23,6 @@ const useTooltip = (
 		node,
 		content,
 		contentSelector,
-		contentClone,
 		contentActions,
 		containerClassName,
 		position,
@@ -41,7 +39,6 @@ const useTooltip = (
 		update: ({
 			content: newContent,
 			contentSelector: newContentSelector,
-			contentClone: newContentClone,
 			contentActions: newContentActions,
 			containerClassName: newContainerClassName,
 			position: newPosition,
@@ -56,7 +53,6 @@ const useTooltip = (
 			tooltip.update(
 				newContent,
 				newContentSelector,
-				newContentClone,
 				newContentActions,
 				newContainerClassName,
 				newPosition,

From 8e781d6ce10c57949206a1abcf53f561423db05a Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Tue, 8 Feb 2022 07:49:55 +0100
Subject: [PATCH 2/2] fix: Merge main last refactoring, #29

---
 src/Tooltip.js | 55 ++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/Tooltip.js b/src/Tooltip.js
index f270cf3..bca7249 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -13,7 +13,7 @@ class Tooltip {
 
 	#boundEnterHandler = null
 	#boundLeaveHandler = null
-	#boundKeyDownHandler = null
+	#boundWindowChangeHandler = null
 
 	#target = null
 	#content = null
@@ -69,7 +69,7 @@ class Tooltip {
 		this.#target.setAttribute('style', 'position: relative')
 		this.#target.setAttribute('aria-describedby', 'tooltip')
 
-		disabled ? this.#disableTarget() : this.#enableTarget()
+		disabled ? this.#disable() : this.#enable()
 
 		Tooltip.#instances.push(this)
 	}
@@ -117,14 +117,14 @@ class Tooltip {
 		}
 
 		if (hasToDisableTarget) {
-			this.#disableTarget()
+			this.#disable()
 		} else if (hasToEnableTarget) {
-			this.#enableTarget()
+			this.#enable()
 		}
 	}
 
-	destroy() {
-		this.#removeTooltipFromTarget()
+	async destroy() {
+		await this.#removeTooltipFromTarget()
 
 		this.#disableTarget()
 
@@ -134,16 +134,32 @@ class Tooltip {
 		this.#observer = null
 	}
 
+	#enable() {
+		this.#enableTarget()
+		this.#enableWindow()
+	}
+
 	#enableTarget() {
 		this.#boundEnterHandler = this.#onTargetEnter.bind(this)
 		this.#boundLeaveHandler = this.#onTargetLeave.bind(this)
-		this.#boundKeyDownHandler = this.#onTargetKeyDown.bind(this)
 
 		this.#target.addEventListener('mouseenter', this.#boundEnterHandler)
 		this.#target.addEventListener('mouseleave', this.#boundLeaveHandler)
 		this.#target.addEventListener('focusin', this.#boundEnterHandler)
 		this.#target.addEventListener('focusout', this.#boundLeaveHandler)
-		window.addEventListener('keydown', this.#boundKeyDownHandler)
+	}
+
+	#enableWindow() {
+		this.#boundWindowChangeHandler = this.#onWindowChange.bind(this)
+
+		window.addEventListener('keydown', this.#boundWindowChangeHandler)
+		window.addEventListener('resize', this.#boundWindowChangeHandler)
+		window.addEventListener('scroll', this.#boundWindowChangeHandler)
+	}
+
+	#disable() {
+		this.#disableTarget()
+		this.#disableWindow()
 	}
 
 	#disableTarget() {
@@ -151,11 +167,17 @@ class Tooltip {
 		this.#target.removeEventListener('mouseleave', this.#boundLeaveHandler)
 		this.#target.removeEventListener('focusin', this.#boundEnterHandler)
 		this.#target.removeEventListener('focusout', this.#boundLeaveHandler)
-		window.removeEventListener('keydown', this.#boundKeyDownHandler)
 
 		this.#boundEnterHandler = null
 		this.#boundLeaveHandler = null
-		this.#boundKeyDownHandler = null
+	}
+
+	#disableWindow() {
+		window.removeEventListener('keydown', this.#boundWindowChangeHandler)
+		window.removeEventListener('resize', this.#boundWindowChangeHandler)
+		window.removeEventListener('scroll', this.#boundWindowChangeHandler)
+
+		this.#boundWindowChangeHandler = null
 	}
 
 	#createTooltip() {
@@ -340,9 +362,16 @@ class Tooltip {
 		await this.#removeTooltipFromTarget()
 	}
 
-	async #onTargetKeyDown(e) {
-		if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) {
-			await this.#onTargetLeave()
+	async #onWindowChange(e) {
+		if (
+			this.#tooltip &&
+			this.#tooltip.parentNode &&
+			(e.type !== 'keydown' ||
+				(e.type === 'keydown' && e.key === 'Escape') ||
+				e.key === 'Esc' ||
+				e.keyCode === 27)
+		) {
+			await this.#removeTooltipFromTarget()
 		}
 	}
 }