From 9c5e6508d9dcbfbc1f1e34416fe5ff4e39980419 Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Mon, 31 Jan 2022 20:08:24 +0100
Subject: [PATCH 1/2] feat: Extend hovering area, #3

---
 src/Tooltip.js     | 36 ++++++++++++++++++++++++++++++++++--
 src/useTooltip.css |  8 ++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/Tooltip.js b/src/Tooltip.js
index fb52153..8bf6af8 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -69,7 +69,7 @@ class Tooltip {
 		this.#target.setAttribute('style', 'position: relative')
 
 		this.#createTooltip()
-		this.#tooltip.classList.add(this.#containerClassName || '__tooltip', `__tooltip-${this.#position}`)
+		this.#tooltip.setAttribute('class', this.#containerClassName || `__tooltip __tooltip-${this.#position}`)
 
 		disabled ? this.#disableTarget() : this.#enableTarget()
 
@@ -110,7 +110,7 @@ class Tooltip {
 		this.#leaveDelay = leaveDelay || 0
 		this.#offset = Math.max(offset || 10, 5)
 
-		if (hasContentChanged) {
+		if (hasContentChanged || hasPositionChanged) {
 			this.#removeTooltipFromTarget()
 			this.#createTooltip()
 		}
@@ -167,6 +167,38 @@ class Tooltip {
 			const child = document.createTextNode(this.#content)
 			this.#tooltip.appendChild(child)
 		}
+
+		this.#createAndAddTooltipArea()
+	}
+
+	#createAndAddTooltipArea() {
+		const area = document.createElement('div')
+		area.setAttribute('aria-hidden', 'true')
+		area.setAttribute('class', '__tooltip-area')
+		switch (this.#position) {
+			case 'left': {
+				area.setAttribute('style', `width: calc(100% + ${Tooltip.GAP}px)`)
+				break
+			}
+			case 'right': {
+				area.setAttribute(
+					'style',
+					`width: calc(100% + ${Tooltip.GAP}px); margin-left: calc(-0.5rem - ${Tooltip.GAP}px)`
+				)
+				break
+			}
+			case 'bottom': {
+				area.setAttribute(
+					'style',
+					`height: calc(100% + ${Tooltip.GAP}px); margin-top: calc(-0.5rem - ${Tooltip.GAP}px)`
+				)
+				break
+			}
+			default: {
+				area.setAttribute('style', `height: calc(100% + ${Tooltip.GAP}px)`)
+			}
+		}
+		this.#tooltip.appendChild(area)
 	}
 
 	#positionTooltip() {
diff --git a/src/useTooltip.css b/src/useTooltip.css
index 78635f7..1409cc5 100644
--- a/src/useTooltip.css
+++ b/src/useTooltip.css
@@ -17,6 +17,14 @@
 	border-style: solid;
 }
 
+.__tooltip-area {
+	position: absolute;
+	background: transparent;
+	width: 100%;
+	height: 100%;
+	margin: -0.5rem;
+}
+
 .__tooltip-top::after {
 	bottom: -10px;
 	left: 50%;

From a759f1aa50bab1ef5f156c532e3cc58165b31279 Mon Sep 17 00:00:00 2001
From: untemps <v.lebadezet@untemps.net>
Date: Mon, 31 Jan 2022 21:44:29 +0100
Subject: [PATCH 2/2] feat: Update hovering area when offset has changed, #3

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

diff --git a/src/Tooltip.js b/src/Tooltip.js
index 8bf6af8..19407ad 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -94,6 +94,7 @@ class Tooltip {
 		const hasContentChanged = contentSelector !== this.#contentSelector || content !== this.#content
 		const hasContainerClassNameChanged = containerClassName !== this.#containerClassName
 		const hasPositionChanged = position !== this.#position
+		const hasOffsetChanged = position !== this.#offset
 		const hasToDisableTarget = disabled && this.#boundEnterHandler
 		const hasToEnableTarget = !disabled && !this.#boundEnterHandler
 
@@ -110,12 +111,12 @@ class Tooltip {
 		this.#leaveDelay = leaveDelay || 0
 		this.#offset = Math.max(offset || 10, 5)
 
-		if (hasContentChanged || hasPositionChanged) {
+		if (hasContentChanged || hasPositionChanged || hasOffsetChanged) {
 			this.#removeTooltipFromTarget()
 			this.#createTooltip()
 		}
 
-		if (hasContainerClassNameChanged || hasContentChanged || hasPositionChanged) {
+		if (hasContainerClassNameChanged || hasContentChanged || hasPositionChanged || hasOffsetChanged) {
 			this.#tooltip.setAttribute('class', this.#containerClassName || `__tooltip __tooltip-${this.#position}`)
 		}
 
@@ -177,25 +178,25 @@ class Tooltip {
 		area.setAttribute('class', '__tooltip-area')
 		switch (this.#position) {
 			case 'left': {
-				area.setAttribute('style', `width: calc(100% + ${Tooltip.GAP}px)`)
+				area.setAttribute('style', `width: calc(100% + ${this.#offset}px)`)
 				break
 			}
 			case 'right': {
 				area.setAttribute(
 					'style',
-					`width: calc(100% + ${Tooltip.GAP}px); margin-left: calc(-0.5rem - ${Tooltip.GAP}px)`
+					`width: calc(100% + ${this.#offset}px); margin-left: calc(-0.5rem - ${this.#offset}px)`
 				)
 				break
 			}
 			case 'bottom': {
 				area.setAttribute(
 					'style',
-					`height: calc(100% + ${Tooltip.GAP}px); margin-top: calc(-0.5rem - ${Tooltip.GAP}px)`
+					`height: calc(100% + ${this.#offset}px); margin-top: calc(-0.5rem - ${this.#offset}px)`
 				)
 				break
 			}
 			default: {
-				area.setAttribute('style', `height: calc(100% + ${Tooltip.GAP}px)`)
+				area.setAttribute('style', `height: calc(100% + ${this.#offset}px)`)
 			}
 		}
 		this.#tooltip.appendChild(area)