Fix #3241: Tooltip allow event=both for handling hover and focus. (#3243

)
primefaces · Sep 5, 2022 · 7362e5c · 7362e5c
1 parent e92d0bc
commit 7362e5c
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 26 deletions.
diff --git a/api-generator/components/tooltip.js b/api-generator/components/tooltip.js
@@ -57,7 +57,7 @@ const TooltipProps = [
         name: 'event',
         type: 'string',
         default: 'hover',
-        description: 'Event to show the tooltip, valid values are hover and focus.'
+        description: 'Event to show the tooltip, valid values are hover, focus, and both.'
     },
     {
         name: 'showEvent',

diff --git a/components/doc/tooltip/index.js b/components/doc/tooltip/index.js
@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const TooltipDoc = memo(() => {
     const sources = {
@@ -581,7 +581,7 @@ import { Tooltip } from 'primereact/tooltip';
                     </CodeHighlight>
 
                     <h5>Events</h5>
-                    <p>Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.</p>
+                    <p>Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide. You can set it to 'both' to allow for both hover and focus events.</p>
                     <CodeHighlight>
                         {`
 <InputText type="text" placeholder="Right" tooltip="Enter your username" tooltipOptions={{event: 'focus'}}/>
@@ -679,7 +679,7 @@ import { Tooltip } from 'primereact/tooltip';
                                     <td>event</td>
                                     <td>string</td>
                                     <td>hover</td>
-                                    <td>Event to show the tooltip, valid values are hover and focus.</td>
+                                    <td>Event to show the tooltip, valid values are hover, focus, and both.</td>
                                 </tr>
                                 <tr>
                                     <td>showEvent</td>

diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
@@ -64,21 +64,25 @@ export const Tooltip = React.memo(
         };
 
         const getEvents = (target) => {
-            let showEvent = getTargetOption(target, 'showevent') || props.showEvent;
-            let hideEvent = getTargetOption(target, 'hideevent') || props.hideEvent;
+            let showEvents = [getTargetOption(target, 'showevent') || props.showEvent];
+            let hideEvents = [getTargetOption(target, 'hideevent') || props.hideEvent];
 
             if (isMouseTrack(target)) {
-                showEvent = 'mousemove';
-                hideEvent = 'mouseleave';
+                showEvents = ['mousemove'];
+                hideEvents = ['mouseleave'];
             } else {
                 const event = getTargetOption(target, 'event') || props.event;
                 if (event === 'focus') {
-                    showEvent = 'focus';
-                    hideEvent = 'blur';
+                    showEvents = ['focus'];
+                    hideEvents = ['blur'];
+                }
+                if (event === 'both') {
+                    showEvents = ['focus', 'mouseenter'];
+                    hideEvents = ['blur', 'mouseleave'];
                 }
             }
 
-            return { showEvent, hideEvent };
+            return { showEvents, hideEvents };
         };
 
         const getPosition = (target) => {
@@ -271,19 +275,19 @@ export const Tooltip = React.memo(
 
         const bindTargetEvent = (target) => {
             if (target) {
-                const { showEvent, hideEvent } = getEvents(target);
+                const { showEvents, hideEvents } = getEvents(target);
                 const currentTarget = getTarget(target);
-                currentTarget.addEventListener(showEvent, show);
-                currentTarget.addEventListener(hideEvent, hide);
+                showEvents.forEach((event) => currentTarget.addEventListener(event, show));
+                hideEvents.forEach((event) => currentTarget.addEventListener(event, hide));
             }
         };
 
         const unbindTargetEvent = (target) => {
             if (target) {
-                const { showEvent, hideEvent } = getEvents(target);
+                const { showEvents, hideEvents } = getEvents(target);
                 const currentTarget = getTarget(target);
-                currentTarget.removeEventListener(showEvent, show);
-                currentTarget.removeEventListener(hideEvent, hide);
+                showEvents.forEach((event) => currentTarget.removeEventListener(event, show));
+                hideEvents.forEach((event) => currentTarget.removeEventListener(event, hide));
             }
         };
 

diff --git a/components/lib/tooltip/tooltipoptions.d.ts b/components/lib/tooltip/tooltipoptions.d.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 type TooltipPositionType = 'top' | 'bottom' | 'left' | 'right';
 
-type TooltipEventType = 'hover' | 'focus';
+type TooltipEventType = 'hover' | 'focus' | 'both';
 
 type TooltipAppendToType = 'self' | HTMLElement | undefined | null;
 

diff --git a/pages/tooltip/index.js b/pages/tooltip/index.js
@@ -1,14 +1,14 @@
+import getConfig from 'next/config';
+import Head from 'next/head';
 import React, { useState } from 'react';
-import { InputText } from '../../components/lib/inputtext/InputText';
+import { DocActions } from '../../components/doc/common/docactions';
+import TooltipDoc from '../../components/doc/tooltip';
+import { Badge } from '../../components/lib/badge/Badge';
 import { Button } from '../../components/lib/button/Button';
-import { Tooltip } from '../../components/lib/tooltip/Tooltip';
+import { InputText } from '../../components/lib/inputtext/InputText';
 import { Knob } from '../../components/lib/knob/Knob';
 import { Slider } from '../../components/lib/slider/Slider';
-import { Badge } from '../../components/lib/badge/Badge';
-import TooltipDoc from '../../components/doc/tooltip';
-import { DocActions } from '../../components/doc/common/docactions';
-import Head from 'next/head';
-import getConfig from 'next/config';
+import { Tooltip } from '../../components/lib/tooltip/Tooltip';
 
 const TooltipDemo = () => {
     const [saveBtnTooltipText, setSaveBtnTooltipText] = useState('Click to proceed');