fix: touch and mouse events

Author: kevinchappell

src/index.html

@@ -54,10 +54,7 @@
       data-tooltip-type="click">
       Click Me
     </button>
-
-
   </div>
-
 </body>
 
 </html>

src/js/index.test.ts

@@ -33,13 +33,27 @@ describe('SmartTooltip', () => {
     assert.equal(tooltipElement?.textContent, 'Test tooltip')
   })
 
+  test('should show tooltip on touchstart', () => {
+    trigger.dispatchEvent(new MouseEvent('touchstart', { bubbles: true }))
+    const tooltipElement = document.querySelector('div[class*="tooltip"]')
+    assert.ok(tooltipElement?.classList.contains('visible'))
+    assert.equal(tooltipElement?.textContent, 'Test tooltip')
+  })
+
   test('should hide tooltip on mouseout', () => {
     trigger.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
     trigger.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }))
     const tooltipElement = document.querySelector('div[class*="tooltip"]')
     assert.ok(!tooltipElement?.classList.contains('visible'))
   })
 
+  test('should hide tooltip on touchend', () => {
+    trigger.dispatchEvent(new MouseEvent('touchstart', { bubbles: true }))
+    trigger.dispatchEvent(new MouseEvent('touchend', { bubbles: true }))
+    const tooltipElement = document.querySelector('div[class*="tooltip"]')
+    assert.ok(!tooltipElement?.classList.contains('visible'))
+  })
+
   test('should toggle tooltip on click for click-type triggers', () => {
     trigger.setAttribute('data-tooltip-type', 'click')
     trigger.click()

src/js/index.ts

@@ -66,8 +66,10 @@ export class SmartTooltip {
   }
 
   private setupEventListeners() {
-    document.addEventListener('pointerenter', this.handleMouseOver)
-    document.addEventListener('pointerleave', this.handleMouseOut)
+    document.addEventListener('mouseover', this.handleMouseOver)
+    document.addEventListener('mouseout', this.handleMouseOut)
+    document.addEventListener('touchstart', this.handleMouseOver)
+    document.addEventListener('touchend', this.handleMouseOut)
     document.addEventListener('click', this.handleClick)
     window.addEventListener('resize', this.handleResize)
     window.addEventListener('scroll', this.handleScroll, true)
@@ -244,8 +246,10 @@ export class SmartTooltip {
   }
 
   public destroy(): void {
-    document.removeEventListener('pointerenter', this.handleMouseOver)
-    document.removeEventListener('pointerleave', this.handleMouseOut)
+    document.removeEventListener('mouseover', this.handleMouseOver)
+    document.removeEventListener('mouseout', this.handleMouseOut)
+    document.removeEventListener('touchstart', this.handleMouseOver)
+    document.removeEventListener('touchend', this.handleMouseOut)
     document.removeEventListener('click', this.handleClick)
     window.removeEventListener('resize', this.handleResize)
     window.removeEventListener('scroll', this.handleScroll, true)