Skip to content

Commit 2bd9519

Browse files
rkaraivanovrkaraivanov
committed
feat: Support same trigger for show and hide
1 parent c3eb8b6 commit 2bd9519

File tree

3 files changed

+178
-39
lines changed

3 files changed

+178
-39
lines changed

‎src/components/tooltip/tooltip-event-controller.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,11 +200,11 @@ class TooltipController implements ReactiveController {
200200

201201
// Anchor handlers
202202
if (event.target === this._anchor) {
203-
if (this._showTriggers.has(event.type)) {
203+
if (this._showTriggers.has(event.type) && !this._open) {
204204
this._options.onShow.call(this._host);
205205
}
206206

207-
if (this._hideTriggers.has(event.type)) {
207+
if (this._hideTriggers.has(event.type) && this._open) {
208208
this._options.onHide.call(this._host);
209209
}
210210
}

‎src/components/tooltip/tooltip.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -316,8 +316,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
316316
/** Shows the tooltip if not already showing. */
317317
public show(target?: Element): Promise<boolean> {
318318
if (target) {
319-
clearTimeout(this._timeoutId);
320-
this._player.stopAll();
319+
this._stopTimeoutAndAnimation();
321320

322321
if (this._controller.anchor !== target) {
323322
this.open = false;
@@ -355,14 +354,17 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
355354
}
356355

357356
private _showOnInteraction(): void {
358-
clearTimeout(this._timeoutId);
359-
this._player.stopAll();
357+
this._stopTimeoutAndAnimation();
360358
this._showWithEvent();
361359
}
362360

363-
private _runAutoHide(): void {
361+
private _stopTimeoutAndAnimation(): void {
364362
clearTimeout(this._timeoutId);
365363
this._player.stopAll();
364+
}
365+
366+
private _setAutoHide(): void {
367+
this._stopTimeoutAndAnimation();
366368

367369
this._timeoutId = setTimeout(
368370
() => this._hideWithEvent(),
@@ -372,7 +374,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
372374

373375
private _hideOnInteraction(): void {
374376
if (!this.sticky) {
375-
this._runAutoHide();
377+
this._setAutoHide();
376378
}
377379
}
378380

@@ -399,7 +401,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
399401
<slot>${this.message ? html`${this.message}` : nothing}</slot>
400402
${this.sticky
401403
? html`
402-
<slot name="close-button" @click=${this._runAutoHide}>
404+
<slot name="close-button" @click=${this._setAutoHide}>
403405
<igc-icon
404406
name="input_clear"
405407
collection="default"

‎stories/tooltip.stories.ts‎

Lines changed: 167 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,24 @@ const metadata: Meta<IgcTooltipComponent> = {
6161
table: { defaultValue: { summary: '6' } },
6262
},
6363
placement: {
64-
type: 'IgcPlacement',
64+
type: '"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end"',
6565
description:
6666
'Where to place the floating element relative to the parent anchor element.',
67-
control: 'IgcPlacement',
67+
options: [
68+
'top',
69+
'top-start',
70+
'top-end',
71+
'bottom',
72+
'bottom-start',
73+
'bottom-end',
74+
'right',
75+
'right-start',
76+
'right-end',
77+
'left',
78+
'left-start',
79+
'left-end',
80+
],
81+
control: { type: 'select' },
6882
table: { defaultValue: { summary: 'top' } },
6983
},
7084
anchor: {
@@ -143,7 +157,19 @@ interface IgcTooltipArgs {
143157
/** The offset of the tooltip from the anchor in pixels. */
144158
offset: number;
145159
/** Where to place the floating element relative to the parent anchor element. */
146-
placement: IgcPlacement;
160+
placement:
161+
| 'top'
162+
| 'top-start'
163+
| 'top-end'
164+
| 'bottom'
165+
| 'bottom-start'
166+
| 'bottom-end'
167+
| 'right'
168+
| 'right-start'
169+
| 'right-end'
170+
| 'left'
171+
| 'left-start'
172+
| 'left-end';
147173
/** An element instance or an IDREF to use as the anchor for the tooltip. */
148174
anchor: Element | string;
149175
/**
@@ -330,36 +356,147 @@ export const Inline: Story = {
330356
`,
331357
};
332358

333-
function getValue() {
334-
return document.querySelector('igc-input')?.value;
335-
}
336-
337359
export const Triggers: Story = {
338-
render: (args) => html`
339-
<igc-button>Pointerenter/Pointerleave (default)</igc-button>
340-
<igc-tooltip ?sticky=${args.sticky}>
341-
I will show on pointerenter and hide on pointerleave
342-
</igc-tooltip>
343-
344-
<igc-button> Focus/Blur </igc-button>
345-
<igc-tooltip show-triggers="focus" hide-triggers="blur">
346-
I will show on focus and hide on blur
347-
</igc-tooltip>
348-
349-
<igc-button>Click</igc-button>
350-
<igc-tooltip show-triggers="click" hide-triggers="pointerleave,blur">
351-
I will show on click and hide on pointerleave or blur
352-
</igc-tooltip>
360+
render: () => html`
361+
<style>
362+
#triggers-container {
363+
display: flex;
364+
flex-wrap: wrap;
365+
align-content: space-between;
366+
gap: 1rem;
367+
368+
& igc-card {
369+
max-width: 320px;
370+
}
353371
354-
<igc-button>Keydown</igc-button>
355-
<igc-tooltip show-triggers="keydown" hide-triggers="blur">
356-
I will show on keydown and hide on blur
357-
</igc-tooltip>
372+
& igc-card-header {
373+
min-height: 5rem;
374+
}
358375
359-
<igc-input label="Change my value"></igc-input>
360-
<igc-tooltip show-triggers="igcChange">
361-
You've changed the value to ${getValue()}
362-
</igc-tooltip>
376+
& igc-card-content {
377+
display: flex;
378+
height: 100%;
379+
flex-direction: column;
380+
gap: 0.5rem;
381+
justify-content: space-between;
382+
}
383+
}
384+
</style>
385+
<div id="triggers-container">
386+
<igc-card>
387+
<igc-card-header>
388+
<h4 slot="title">Default triggers</h4>
389+
</igc-card-header>
390+
<igc-card-content>
391+
<p>
392+
Hovering over the button bellow will show the default configuration
393+
of a tooltip component which is <strong>pointer enter</strong> for
394+
showing the tooltip and <strong>pointer leave</strong> or
395+
<strong>click</strong> for hiding once shown.
396+
</p>
397+
398+
<igc-button id="triggers-default">Hover over me</igc-button>
399+
400+
<igc-tooltip anchor="triggers-default">
401+
I am show on pointer enter and hidden on pointer leave and/or click.
402+
</igc-tooltip>
403+
</igc-card-content>
404+
</igc-card>
405+
406+
<igc-card>
407+
<igc-card-header>
408+
<h4 slot="title">Focus based</h4>
409+
</igc-card-header>
410+
<igc-card-content>
411+
<p>
412+
In this instance, the tooltip is bound to show on its anchor
413+
<strong>focus</strong> and will hide when its anchor is
414+
<strong>blurred</strong>.
415+
</p>
416+
<p>Try to navigate with a Tab key to the anchor to see the effect.</p>
417+
418+
<igc-button id="triggers-focus-blur">Focus me</igc-button>
419+
420+
<igc-tooltip
421+
anchor="triggers-focus-blur"
422+
show-delay="0"
423+
hide-delay="0"
424+
show-triggers="focus"
425+
hide-triggers="blur"
426+
>
427+
I am shown on focus and hidden on blur.
428+
</igc-tooltip>
429+
</igc-card-content>
430+
</igc-card>
431+
432+
<igc-card>
433+
<igc-card-header>
434+
<h4 slot="title">Same trigger(s) for showing and hiding</h4>
435+
</igc-card-header>
436+
<igc-card-content>
437+
<p>
438+
The same trigger can be bound to both show and hide the tooltip. The
439+
button below has its tooltip bound to show/hide on
440+
<strong>click</strong>.
441+
</p>
442+
443+
<igc-button id="triggers-click">Click</igc-button>
444+
445+
<igc-tooltip
446+
anchor="triggers-click"
447+
show-triggers="click"
448+
hide-triggers="click"
449+
>
450+
I am show on click and will hide on anchor click.
451+
</igc-tooltip>
452+
</igc-card-content>
453+
</igc-card>
454+
455+
<igc-card>
456+
<igc-card-header>
457+
<h4 slot="title">Keyboard interactions</h4>
458+
</igc-card-header>
459+
<igc-card-content>
460+
<p>
461+
Keyboard interactions are also supported. The button below has its
462+
tooltip bound to show on a <strong>keypress</strong> and hide on a
463+
<strong>keypress</strong> or <strong>blur</strong>.
464+
</p>
465+
466+
<p>Try it out by focusing the button and pressing a key.</p>
467+
468+
<igc-button id="triggers-keypress">Press a key</igc-button>
469+
470+
<igc-tooltip
471+
anchor="triggers-keypress"
472+
show-triggers="keypress"
473+
hide-triggers="keypress blur"
474+
>
475+
I am shown on a keypress and will hide on a keypress or blur.
476+
</igc-tooltip>
477+
</igc-card-content>
478+
</igc-card>
479+
480+
<igc-card>
481+
<igc-card-header>
482+
<h4 slot="title">Custom events</h4>
483+
</igc-card-header>
484+
<igc-card-content>
485+
<p>
486+
The tooltip supports any DOM event including custom ones. Try typing
487+
a value in the input below and then "commit" it by blurring the
488+
input. The tooltip will be shown when the
489+
<strong>igcChange</strong> event is fired from the input.
490+
</p>
491+
492+
<igc-input id="triggers-custom" label="Username"></igc-input>
493+
494+
<igc-tooltip anchor="triggers-custom" show-triggers="igcChange">
495+
Value changed!
496+
</igc-tooltip>
497+
</igc-card-content>
498+
</igc-card>
499+
</div>
363500
`,
364501
};
365502

0 commit comments

Comments
 (0)