Skip to content

Commit

Permalink
Fix #2588: Tooltip add position=mouse (#3625)
Browse files Browse the repository at this point in the history 
* Ref tests

* Fix #2588: Tooltip add position=mouse
  • Loading branch information
@melloware
melloware authored Nov 13, 2022
1 parent fa687fd commit f7bbf0f
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 80 deletions.
2 changes: 1 addition & 1 deletion api-generator/components/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const TooltipProps = [
name: 'position',
type: 'string',
default: 'right',
description: 'Position of the tooltip, valid values are right, left, top and bottom.'
description: 'Position of the tooltip, valid values are mouse, right, left, top and bottom.'
},
{
name: 'my',
Expand Down
94 changes: 53 additions & 41 deletions components/doc/tooltip/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,21 @@ export class TooltipDemo extends Component {
<div className="card">
<h5>Positions</h5>
<div className="grid p-fluid">
<div className="col-12 md:col-3">
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Right" tooltip="Enter your username" />
</div>
<div className="col-12 md:col-3">
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{position: 'top'}} />
</div>
<div className="col-12 md:col-3">
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{position: 'bottom'}} />
</div>
<div className="col-12 md:col-3">
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{position: 'left'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{position: 'mouse'}} />
</div>
</div>
<h5>Focus and Blur</h5>
Expand Down Expand Up @@ -155,18 +158,21 @@ const TooltipDemo = () => {
<div className="card">
<h5>Positions</h5>
<div className="grid p-fluid">
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Right" tooltip="Enter your username" />
</div>
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{position: 'top'}} />
</div>
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{position: 'bottom'}} />
</div>
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{position: 'left'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Right" tooltip="Enter your username" />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{position: 'top'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{position: 'bottom'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{position: 'left'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{position: 'mouse'}} />
</div>
</div>
<h5>Focus and Blur</h5>
Expand Down Expand Up @@ -273,18 +279,21 @@ const TooltipDemo = () => {
<div className="card">
<h5>Positions</h5>
<div className="grid p-fluid">
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Right" tooltip="Enter your username" />
</div>
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{position: 'top'}} />
</div>
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{position: 'bottom'}} />
</div>
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{position: 'left'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Right" tooltip="Enter your username" />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{position: 'top'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{position: 'bottom'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{position: 'left'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{position: 'mouse'}} />
</div>
</div>
<h5>Focus and Blur</h5>
Expand Down Expand Up @@ -401,18 +410,21 @@ const TooltipDemo = () => {
<div className="card">
<h5>Positions</h5>
<div className="grid p-fluid">
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Right" tooltip="Enter your username" />
</div>
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{position: 'top'}} />
</div>
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{position: 'bottom'}} />
</div>
<div className="col-12 md:col-3">
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{position: 'left'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Right" tooltip="Enter your username" />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{position: 'top'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{position: 'bottom'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{position: 'left'}} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{position: 'mouse'}} />
</div>
</div>
<h5>Focus and Blur</h5>
Expand Down Expand Up @@ -661,7 +673,7 @@ import { Tooltip } from 'primereact/tooltip';
<td>position</td>
<td>string</td>
<td>right</td>
<td>Position of the tooltip, valid values are right, left, top and bottom.</td>
<td>Position of the tooltip, valid values are mouse, right, left, top and bottom.</td>
</tr>
<tr>
<td>my</td>
Expand Down
43 changes: 22 additions & 21 deletions components/lib/tooltip/Tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export const Tooltip = React.memo(
elementRef.current.style.pointerEvents = 'none';
}

if (isMouseTrack(currentTargetRef.current) && !containerSize.current) {
if ((isMouseTrack(currentTargetRef.current) || position == 'mouse') && !containerSize.current) {
containerSize.current = {
width: DomHandler.getOuterWidth(elementRef.current),
height: DomHandler.getOuterHeight(elementRef.current)
Expand Down Expand Up @@ -192,7 +192,7 @@ export const Tooltip = React.memo(
top = 0,
currentPosition = position || positionState;

if (isMouseTrack(target) && coordinate) {
if ((isMouseTrack(target) || currentPosition == 'mouse') && coordinate) {
const _containerSize = {
width: DomHandler.getOuterWidth(elementRef.current),
height: DomHandler.getOuterHeight(elementRef.current)
Expand All @@ -209,6 +209,7 @@ export const Tooltip = React.memo(
top -= _containerSize.height / 2 - mouseTrackTop;
break;
case 'right':
case 'mouse':
left += mouseTrackLeft;
top -= _containerSize.height / 2 - mouseTrackTop;
break;
Expand Down Expand Up @@ -491,31 +492,31 @@ export const Tooltip = React.memo(
Tooltip.displayName = 'Tooltip';
Tooltip.defaultProps = {
__TYPE: 'Tooltip',
id: null,
target: null,
content: null,
disabled: false,
className: null,
style: null,
appendTo: null,
position: 'right',
my: null,
at: null,
event: null,
showEvent: 'mouseenter',
hideEvent: 'mouseleave',
autoHide: true,
autoZIndex: true,
baseZIndex: 0,
className: null,
content: null,
disabled: false,
event: null,
hideDelay: 0,
hideEvent: 'mouseleave',
id: null,
mouseTrack: false,
mouseTrackTop: 5,
mouseTrackLeft: 5,
showDelay: 0,
updateDelay: 0,
hideDelay: 0,
autoHide: true,
showOnDisabled: false,
onBeforeShow: null,
mouseTrackTop: 5,
my: null,
onBeforeHide: null,
onBeforeShow: null,
onHide: null,
onShow: null,
onHide: null
position: 'right',
showDelay: 0,
showEvent: 'mouseenter',
showOnDisabled: false,
style: null,
target: null,
updateDelay: 0
};
26 changes: 13 additions & 13 deletions components/lib/tooltip/tooltipoptions.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';

type TooltipPositionType = 'top' | 'bottom' | 'left' | 'right';
type TooltipPositionType = 'top' | 'bottom' | 'left' | 'right' | 'mouse';

type TooltipEventType = 'hover' | 'focus' | 'both';

Expand All @@ -12,26 +12,26 @@ interface TooltipEventParams {
}

export default interface TooltipOptions {
className?: string;
style?: React.CSSProperties;
appendTo?: TooltipAppendToType;
position?: TooltipPositionType;
my?: string;
at?: string;
event?: TooltipEventType;
showEvent?: string;
hideEvent?: string;
autoHide?: boolean;
autoZIndex?: boolean;
baseZIndex?: number;
className?: string;
disabled?: boolean;
event?: TooltipEventType;
hideDelay?: number;
hideEvent?: string;
mouseTrack?: boolean;
mouseTrackTop?: number;
mouseTrackLeft?: number;
mouseTrackTop?: number;
my?: string;
position?: TooltipPositionType;
showDelay?: number;
updateDelay?: number;
hideDelay?: number;
autoHide?: boolean;
disabled?: boolean;
showEvent?: string;
showOnDisabled?: boolean;
style?: React.CSSProperties;
updateDelay?: number;
onBeforeShow?(e: TooltipEventParams): void;
onBeforeHide?(e: TooltipEventParams): void;
onShow?(e: TooltipEventParams): void;
Expand Down
11 changes: 7 additions & 4 deletions pages/tooltip/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,21 @@ const TooltipDemo = () => {
<div className="card">
<h5>Positions</h5>
<div className="grid p-fluid">
<div className="col-12 md:col-3">
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Right" tooltip="Enter your username" />
</div>
<div className="col-12 md:col-3">
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{ position: 'top' }} />
</div>
<div className="col-12 md:col-3">
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{ position: 'bottom' }} />
</div>
<div className="col-12 md:col-3">
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{ position: 'left' }} />
</div>
<div className="col-12 md:col-2">
<InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{ position: 'mouse' }} />
</div>
</div>

<h5>Focus and Blur</h5>
Expand Down

0 comments on commit f7bbf0f

Please sign in to comment.