diff --git a/apps/docs-app/app/components/f/components/popover.gts b/apps/docs-app/app/components/f/components/popover.gts
index fc24bf32..d00cd121 100644
--- a/apps/docs-app/app/components/f/components/popover.gts
+++ b/apps/docs-app/app/components/f/components/popover.gts
@@ -36,6 +36,9 @@ export default class extends Component {
@tracked
arrow: boolean = true;
+ @tracked
+ delay?: number;
+
@tracked
flip: boolean = false;
@@ -62,6 +65,7 @@ export default class extends Component {
+
+
+
{
id = `popover-${crypto.randomUUID()}`;
- @tracked
- isShown = false;
-
@tracked
adjustedSide: Direction = 'bottom';
- get hasArrow() {
- return this.args.arrow ?? true;
- }
-
- get offset() {
- const defaultOffset = this.hasArrow ? getRemValue() / 2 : 0;
- const { offset } = this.args;
- const numOffset =
- typeof offset === 'number' ? offset : parseFloat(offset ?? '0');
+ @tracked
+ isShown = false;
- return numOffset + defaultOffset;
+ get control() {
+ return this.args.controlElement ?? this._control;
}
- get placement() {
- let placement: Placement | Side = SIDE_TRANSLATION[this.side];
- if (this.args.alignment) {
- placement += `-${this.args.alignment}`;
- }
- return placement as Placement;
+ get hasArrow() {
+ return this.args.arrow ?? true;
}
get middleware() {
@@ -147,41 +136,30 @@ export default class Popover extends Component {
return middleware;
}
- get side(): Direction {
- return this.args.side ?? 'bottom';
- }
+ get offset() {
+ const defaultOffset = this.hasArrow ? getRemValue() / 2 : 0;
+ const { offset } = this.args;
+ const numOffset =
+ typeof offset === 'number' ? offset : parseFloat(offset ?? '0');
- get control() {
- return this.args.controlElement ?? this._control;
+ return numOffset + defaultOffset;
}
- setArrow = (popover: HTMLElement) => {
- this.arrow = popover;
- };
-
- show = async (evtOrInput: Event | HTMLInputElement) => {
- if (this.isShown) {
- return;
+ get placement() {
+ let placement: Placement | Side = SIDE_TRANSLATION[this.side];
+ if (this.args.alignment) {
+ placement += `-${this.args.alignment}`;
}
+ return placement as Placement;
+ }
- const { currentTarget } = evtOrInput as Event;
- this.isShown = true;
-
- await this.args.onShow?.();
-
- if (evtOrInput instanceof HTMLInputElement) {
- this._control = evtOrInput;
- this.showPopover();
- } else if (
- evtOrInput instanceof Event &&
- currentTarget instanceof HTMLElement
- ) {
- this._control = currentTarget;
- this.showPopover();
- }
- };
+ get side(): Direction {
+ return this.args.side ?? 'bottom';
+ }
hide = async () => {
+ this.triggerDisplay.cancelAll();
+
if (!this.isShown) {
return;
}
@@ -192,16 +170,22 @@ export default class Popover extends Component {
this._control = null;
};
- toggle = async (evt: Event) => {
- const action = this.isShown ? this.hide : this.show;
-
- await action(evt);
- };
-
initPopover = (popover: HTMLElement) => {
this.popover = popover;
};
+ setArrow = (popover: HTMLElement) => {
+ this.arrow = popover;
+ };
+
+ show = async (evtOrInput: Event | HTMLInputElement) => {
+ if (this.isShown) {
+ return;
+ }
+
+ this.triggerDisplay.perform(evtOrInput);
+ }
+
showPopover = async () => {
if (!this.control || !this.popover) {
return;
@@ -246,6 +230,35 @@ export default class Popover extends Component {
});
};
+ toggle = async (evt: Event) => {
+ const action = this.isShown ? this.hide : this.show;
+
+ await action(evt);
+ };
+
+ triggerDisplay = restartableTask(async (evtOrInput: Event | HTMLInputElement) => {
+ const { currentTarget } = evtOrInput as Event;
+
+ if (this.args.delay) {
+ await timeout(this.args.delay);
+ }
+
+ this.isShown = true;
+
+ await this.args.onShow?.();
+
+ if (evtOrInput instanceof HTMLInputElement) {
+ this._control = evtOrInput;
+ this.showPopover();
+ } else if (
+ evtOrInput instanceof Event &&
+ currentTarget instanceof HTMLElement
+ ) {
+ this._control = currentTarget;
+ this.showPopover();
+ }
+ });
+
{{#let
(hash
diff --git a/packages/ember-core/src/components/tooltip.gts b/packages/ember-core/src/components/tooltip.gts
index 29fe46dd..ff9b36ac 100644
--- a/packages/ember-core/src/components/tooltip.gts
+++ b/packages/ember-core/src/components/tooltip.gts
@@ -4,7 +4,6 @@ import Component from '@glimmer/component';
import Popover from './popover.gts';
import type { Direction } from './popover.gts';
-import type { TOC } from '@ember/component/template-only';
import type { Alignment } from '@floating-ui/dom';
import type { ComponentLike } from '@glint/template';
@@ -13,6 +12,7 @@ export interface TooltipSignature {
Args: {
alignment?: Alignment;
controlElement?: HTMLElement;
+ delay?: number;
flip?: boolean;
offset?: string | number;
side?: Direction;
@@ -76,10 +76,16 @@ class TooltipTarget extends Component {
}
-const Tooltip: TOC =
+class Tooltip extends Component {
+ get delay() {
+ return this.args.delay ?? 300;
+ }
+
+
=
{{/if}}
-;
+
+}
export default Tooltip;