Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -2065,6 +2065,12 @@
"url": "./tooltips/#show-and-hide-delay"
}
},
"tooltipSwitchShowDelay": {
"more": {
"name": "Tooltip Show and Hide Delay",
"url": "./tooltips/#show-and-hide-delay"
}
},
"tooltipHideDelay": {
"more": {
"name": "Tooltip Show and Hide Delay",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const gridOptions: GridOptions<IOlympicData> = {
minWidth: 100,
},
tooltipShowDelay: 0,
tooltipSwitchShowDelay: 1000,
tooltipHideDelay: 2000,
columnDefs: columnDefs,
};
Expand Down
12 changes: 11 additions & 1 deletion documentation/ag-grid-docs/src/content/docs/tooltips/index.mdoc
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,17 @@ It's possible to configure tooltips to show only when the items hovered are trun

## Show and Hide Delay

Tooltips show after 2 seconds and hide after 10 seconds. Set `tooltipShowDelay` and `tooltipHideDelay` to override these values. The example below has `tooltipShowDelay=0` (shows immediately) and `tooltipHideDelay=2000` (hides in 2,000 milliseconds, or 2 seconds).
By default, tooltips show after 2 seconds and hide after 10 seconds. These delays can be configured in milliseconds:

{% apiDocumentation source="grid-options/properties.json" section="tooltips" names=["tooltipShowDelay", "tooltipSwitchShowDelay", "tooltipHideDelay"] /%}

```{% frameworkTransform=true %}
const gridOptions = {
tooltipShowDelay: 0,
tooltipSwitchShowDelay: 1000,
tooltipHideDelay: 2000,
};
```

{% gridExampleRunner title="Show Hide Delay" name="show-hide-delay" /%}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -460,6 +460,13 @@ export class AgGridAngular<TData = any, TColDef extends ColDef<TData> = ColDef<a
* @agModule `TooltipModule`
*/
@Input() public tooltipShowDelay: number | undefined = undefined;
/** The delay in milliseconds before a tooltip is shown when moving the pointer from one tooltip-enabled element to
* another while the previous tooltip is still visible or pending hide.
* **Note:** This property does not work if `enableBrowserTooltips` is `true`.
* @default 200
* @agModule `TooltipModule`
*/
@Input() public tooltipSwitchShowDelay: number | undefined = undefined;
/** The delay in milliseconds that it takes for tooltips to hide once they have been displayed.
* **Note:** This property does not work if `enableBrowserTooltips` is `true` and `tooltipHideTriggers` includes `timeout`.
* @default 10000
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface BaseProperties {
enableBrowserTooltips?: boolean;
tooltipTrigger?: 'hover' | 'focus';
tooltipShowDelay?: number;
tooltipSwitchShowDelay?: number;
tooltipHideDelay?: number;
tooltipMouseTrack?: boolean;
tooltipInteraction?: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export interface TooltipCtrl<TLocation extends string, TParams> {
getLocation?(): TLocation | 'UNKNOWN';

getTooltipShowDelayOverride?(): number;
getTooltipSwitchShowDelayOverride?(): number;
getTooltipHideDelayOverride?(): number;
shouldDisplayTooltip?(): boolean;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export enum TooltipTrigger {
FOCUS,
}

const SHOW_QUICK_TOOLTIP_DIFF = 1000;
const SHOW_SWITCH_TOOLTIP_DIFF = 1000;
const FADE_OUT_TOOLTIP_TIMEOUT = 1000;
const INTERACTIVE_HIDE_DELAY = 100;

Expand Down Expand Up @@ -131,19 +131,18 @@ export abstract class BaseTooltipStateManager<
}
}

private getGridOptionsTooltipDelay(delayOption: 'tooltipShowDelay' | 'tooltipHideDelay'): number {
private getGridOptionsTooltipDelay(
delayOption: 'tooltipShowDelay' | 'tooltipHideDelay' | 'tooltipSwitchShowDelay'
): number {
const delay = this.gos.get(delayOption)!;
return Math.max(200, delay);
}

private getTooltipDelay(type: 'show' | 'hide'): number {
if (type === 'show') {
return (
this.tooltipCtrl.getTooltipShowDelayOverride?.() ?? this.getGridOptionsTooltipDelay('tooltipShowDelay')
);
}

return this.tooltipCtrl.getTooltipHideDelayOverride?.() ?? this.getGridOptionsTooltipDelay('tooltipHideDelay');
private getTooltipDelay(type: 'Show' | 'Hide' | 'SwitchShow'): number {
return (
this.tooltipCtrl[`getTooltip${type}DelayOverride`]?.() ??
this.getGridOptionsTooltipDelay(`tooltip${type}Delay`)
);
}

public override destroy(): void {
Expand Down Expand Up @@ -252,10 +251,12 @@ export abstract class BaseTooltipStateManager<
}

// if we are showing the tooltip because of focus, no delay at all
// if another tooltip was hidden very recently, we only wait 200ms to show, not the normal waiting time
// if another tooltip was hidden very recently, use the switch show delay instead of the normal delay
let delay = 0;
if (mouseEvent) {
delay = this.isLastTooltipHiddenRecently() ? 200 : this.getTooltipDelay('show');
delay = this.isLastTooltipHiddenRecently()
? this.getTooltipDelay('SwitchShow')
: this.getTooltipDelay('Show');
}

this.lastMouseEvent = mouseEvent || null;
Expand All @@ -269,7 +270,7 @@ export abstract class BaseTooltipStateManager<
const now = Date.now();
const then = lastTooltipHideTime;

return now - then < SHOW_QUICK_TOOLTIP_DIFF;
return now - then < SHOW_SWITCH_TOOLTIP_DIFF;
}

private setToDoNothing(fromHideTooltip?: boolean): void {
Expand Down Expand Up @@ -544,7 +545,7 @@ export abstract class BaseTooltipStateManager<

private startHideTimeout(): void {
this.clearHideTimeout();
this.hideTooltipTimeoutId = window.setTimeout(this.hideTooltip.bind(this), this.getTooltipDelay('hide'));
this.hideTooltipTimeoutId = window.setTimeout(this.hideTooltip.bind(this), this.getTooltipDelay('Hide'));
}

private clearShowTimeout(): void {
Expand Down
8 changes: 8 additions & 0 deletions packages/ag-grid-community/src/entities/gridOptions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,14 @@ export interface GridOptions<TData = any> {
* @agModule `TooltipModule`
*/
tooltipShowDelay?: number;
/**
* The delay in milliseconds before a tooltip is shown when moving the pointer from one tooltip-enabled element to
* another while the previous tooltip is still visible or pending hide.
* **Note:** This property does not work if `enableBrowserTooltips` is `true`.
* @default 200
* @agModule `TooltipModule`
*/
tooltipSwitchShowDelay?: number;
/**
* The delay in milliseconds that it takes for tooltips to hide once they have been displayed.
* **Note:** This property does not work if `enableBrowserTooltips` is `true` and `tooltipHideTriggers` includes `timeout`.
Expand Down
1 change: 1 addition & 0 deletions packages/ag-grid-community/src/gridOptionsDefault.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const GRID_OPTION_DEFAULTS = {
enableBrowserTooltips: false,
tooltipTrigger: 'hover',
tooltipShowDelay: 2000,
tooltipSwitchShowDelay: 200,
tooltipHideDelay: 10000,
tooltipMouseTrack: false,
tooltipShowMode: 'standard',
Expand Down
1 change: 1 addition & 0 deletions packages/ag-grid-community/src/propertyKeys.ts
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ export const _NUMBER_GRID_OPTIONS: KeysWithType<number>[] = [
'maxBlocksInCache',
'maxConcurrentDatasourceRequests',
'tooltipShowDelay',
'tooltipSwitchShowDelay',
'tooltipHideDelay',
'cacheOverflowSize',
'paginationPageSize',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -457,6 +457,14 @@ const GRID_OPTION_VALIDATIONS: () => Validations<GridOptions> = () => {
return null;
},
},
tooltipSwitchShowDelay: {
validate: (options) => {
if (options.tooltipSwitchShowDelay && options.tooltipSwitchShowDelay < 0) {
return 'tooltipSwitchShowDelay should not be lower than 0';
}
return null;
},
},
treeData: {
supportedRowModels: ['clientSide', 'serverSide'],
validate: (options) => {
Expand Down
8 changes: 8 additions & 0 deletions packages/ag-grid-vue3/src/components/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,13 @@ export interface Props<TData> {
* @agModule `TooltipModule`
*/
tooltipShowDelay?: number,
/** The delay in milliseconds before a tooltip is shown when moving the pointer from one tooltip-enabled element to
* another while the previous tooltip is still visible or pending hide.
* **Note:** This property does not work if `enableBrowserTooltips` is `true`.
* @default 200
* @agModule `TooltipModule`
*/
tooltipSwitchShowDelay?: number,
/** The delay in milliseconds that it takes for tooltips to hide once they have been displayed.
* **Note:** This property does not work if `enableBrowserTooltips` is `true` and `tooltipHideTriggers` includes `timeout`.
* @default 10000
Expand Down Expand Up @@ -2004,6 +2011,7 @@ export function getProps() {
enableBrowserTooltips: undefined,
tooltipTrigger: undefined,
tooltipShowDelay: undefined,
tooltipSwitchShowDelay: undefined,
tooltipHideDelay: undefined,
tooltipMouseTrack: undefined,
tooltipShowMode: undefined,
Expand Down
Loading