Add option for Tooltip to be triggered by both hover and click

This is used in the info-icon tooltip for Console Insights Teasers.
Previously the info-icon button had no on-click behavior. Now a click
opens/closes the connected tooltip. This behavior is also how it's done
e.g. in Gemini for Google Docs.

Bug: 443618746
Change-Id: I057f1e167adab421963754b92de046aafc0669c9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7086472
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Wolfgang Beyer <[email protected]>

Author: wolfib

front_end/panels/console/ConsoleInsightTeaser.ts

@@ -178,7 +178,13 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             aria-details=${'teaser-info-tooltip-' + input.uuid}
             .accessibleLabel=${lockedString(UIStringsNotTranslate.learnDataUsage)}
           ></devtools-button>
-          <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich" jslogContext="teaser-info-tooltip">
+          <devtools-tooltip
+            id=${'teaser-info-tooltip-' + input.uuid}
+            variant="rich"
+            jslogContext="teaser-info-tooltip"
+            trigger="both"
+            hover-delay=500
+          >
             <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
             <div class="learn-more">
               <x-link

front_end/ui/components/docs/tooltip/basic.ts

@@ -31,7 +31,7 @@ Lit.render(
       >
         Non-button click trigger
       </span>
-      <devtools-tooltip id="rich-tooltip" variant="rich" use-click>
+      <devtools-tooltip id="rich-tooltip" variant="rich" trigger="click">
         <p>Rich tooltip</p>
         <button>Action</button>
       </devtools-tooltip>

front_end/ui/components/tooltips/Tooltip.test.ts

@@ -13,7 +13,7 @@ const {html, nothing} = Lit;
 interface RenderProps {
   variant?: Tooltips.Tooltip.TooltipVariant;
   attribute?: 'aria-describedby'|'aria-details';
-  useClick?: boolean;
+  trigger?: Tooltips.Tooltip.TooltipTrigger;
   useHotkey?: boolean;
   jslogContext?: string;
   id?: string;
@@ -22,7 +22,7 @@ interface RenderProps {
 function renderTooltip({
   variant = 'simple',
   attribute = 'aria-describedby',
-  useClick = false,
+  trigger = 'hover',
   useHotkey = false,
   jslogContext = undefined,
   id = 'tooltip-id',
@@ -38,7 +38,7 @@ function renderTooltip({
      id=${id}
      variant=${variant}
      hover-delay=${0}
-     ?use-click=${useClick}
+     trigger=${trigger}
      ?use-hotkey=${useHotkey}
      jslogContext=${jslogContext??nothing}
      >
@@ -233,9 +233,9 @@ describe('Tooltip', () => {
     assert.isFalse(tooltip.open);
   });
 
-  it('should not open on hover if use-click is set', () => {
+  it('should not open on hover if `trigger` is set to `click`', () => {
     const clock = sinon.useFakeTimers({toFake: ['setTimeout']});
-    const container = renderTooltip({useClick: true});
+    const container = renderTooltip({trigger: 'click'});
 
     const button = container.querySelector('button');
     button?.dispatchEvent(new MouseEvent('mouseenter'));
@@ -245,9 +245,9 @@ describe('Tooltip', () => {
     clock.restore();
   });
 
-  it('should not open on focus if use-click is set', () => {
+  it('should not open on focus if `trigger` is set to `click`', () => {
     const clock = sinon.useFakeTimers({toFake: ['setTimeout']});
-    const container = renderTooltip({useClick: true});
+    const container = renderTooltip({trigger: 'click'});
 
     const button = container.querySelector('button');
     button?.dispatchEvent(new FocusEvent('focus'));
@@ -257,8 +257,41 @@ describe('Tooltip', () => {
     clock.restore();
   });
 
-  it('should open with click if use-click is set', () => {
-    const container = renderTooltip({useClick: true});
+  it('should open with click if `trigger` is set to `click`', () => {
+    const container = renderTooltip({trigger: 'click'});
+
+    const button = container.querySelector('button');
+    button?.click();
+
+    assert.isTrue(container.querySelector('devtools-tooltip')?.open);
+  });
+
+  it('should open on hover if `trigger` is set to `both`', () => {
+    const clock = sinon.useFakeTimers({toFake: ['setTimeout']});
+    const container = renderTooltip({trigger: 'both'});
+
+    const button = container.querySelector('button');
+    button?.dispatchEvent(new MouseEvent('mouseenter'));
+
+    clock.runAll();
+    assert.isTrue(container.querySelector('devtools-tooltip')?.open);
+    clock.restore();
+  });
+
+  it('should open on focus if `trigger` is set to `both`', () => {
+    const clock = sinon.useFakeTimers({toFake: ['setTimeout']});
+    const container = renderTooltip({trigger: 'both'});
+
+    const button = container.querySelector('button');
+    button?.dispatchEvent(new FocusEvent('focus'));
+
+    clock.runAll();
+    assert.isTrue(container.querySelector('devtools-tooltip')?.open);
+    clock.restore();
+  });
+
+  it('should open with click if `trigger` is set to `both`', () => {
+    const container = renderTooltip({trigger: 'both'});
 
     const button = container.querySelector('button');
     button?.click();

front_end/ui/components/tooltips/Tooltip.ts

@@ -167,13 +167,15 @@ const proposedRectForSimpleTooltip =
 
 export type TooltipVariant = 'simple'|'rich';
 export type PaddingMode = 'small'|'large';
+export type TooltipTrigger = 'hover'|'click'|'both';
 
 export interface TooltipProperties {
   id: string;
   variant?: TooltipVariant;
   padding?: PaddingMode;
   anchor?: HTMLElement;
   jslogContext?: string;
+  trigger?: TooltipTrigger;
 }
 
 /**
@@ -182,25 +184,27 @@ export interface TooltipProperties {
  * @property hoverDelay - reflects the `"hover-delay"` attribute.
  * @property variant - reflects the `"variant"` attribute.
  * @property padding - reflects the `"padding"` attribute.
- * @property useClick - reflects the `"click"` attribute.
+ * @property trigger - reflects the `"trigger"` attribute.
  * @property verticalDistanceIncrease - reflects the `"vertical-distance-increase"` attribute.
  * @property preferSpanLeft - reflects the `"prefer-span-left"` attribute.
  * @attribute id - Id of the tooltip. Used for searching an anchor element with aria-describedby.
  * @attribute hover-delay - Hover length in ms before the tooltip is shown and hidden.
  * @attribute variant - Variant of the tooltip, `"simple"` for strings only, inverted background,
  *                 `"rich"` for interactive content, background according to theme's surface.
  * @attribute padding - Which padding to use, defaults to `"small"`. Use `"large"` for richer content.
- * @attribute use-click - If present, the tooltip will be shown on click instead of on hover.
+ * @attribute trigger - Specifies which action triggers the tooltip. `"hover"` is the default. `"click"` means the
+ *                 tooltip will be shown on click instead of hover. `"both"` means both hover and click trigger the
+ *                 tooltip.
  * @attribute vertical-distance-increase - The tooltip is moved vertically this many pixels further away from its anchor.
  * @attribute prefer-span-left - If present, the tooltip's preferred position is `"span-left"` (The right
  *                 side of the tooltip and its anchor are aligned. The tooltip expands to the left from
  *                 there.). Applies to rich tooltips only.
  * @attribute use-hotkey - If present, the tooltip will be shown on hover but not when receiving focus.
- *                    Requires a hotkey to open when fosed (Alt-down). When `"use-click"` is present
- *                    as well, use-click takes precedence.
+ *                  Requires a hotkey to open when fosed (Alt-down). When `"trigger"` is present
+ *                  as well, `"trigger"` takes precedence.
  */
 export class Tooltip extends HTMLElement {
-  static readonly observedAttributes = ['id', 'variant', 'jslogcontext'];
+  static readonly observedAttributes = ['id', 'variant', 'jslogcontext', 'trigger'];
   static lastOpenedTooltipId: string|null = null;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -231,16 +235,20 @@ export class Tooltip extends HTMLElement {
     }
   }
 
-  get useClick(): boolean {
-    return this.hasAttribute('use-click') ?? false;
-  }
-  set useClick(useClick: boolean) {
-    if (useClick) {
-      this.setAttribute('use-click', '');
-    } else {
-      this.removeAttribute('use-click');
+  get trigger(): TooltipTrigger {
+    switch (this.getAttribute('trigger')) {
+      case 'click':
+        return 'click';
+      case 'both':
+        return 'both';
+      case 'hover':
+      default:
+        return 'hover';
     }
   }
+  set trigger(trigger: TooltipTrigger) {
+    this.setAttribute('trigger', trigger);
+  }
 
   get hoverDelay(): number {
     return this.hasAttribute('hover-delay') ? Number(this.getAttribute('hover-delay')) : 300;
@@ -297,7 +305,7 @@ export class Tooltip extends HTMLElement {
 
   constructor(properties?: TooltipProperties) {
     super();
-    const {id, variant, padding, jslogContext, anchor} = properties ?? {};
+    const {id, variant, padding, jslogContext, anchor, trigger} = properties ?? {};
     if (id) {
       this.id = id;
     }
@@ -317,6 +325,9 @@ export class Tooltip extends HTMLElement {
       }
       this.#anchor = anchor;
     }
+    if (trigger) {
+      this.trigger = trigger;
+    }
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
@@ -463,7 +474,7 @@ export class Tooltip extends HTMLElement {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'tooltip');
     }
-    this.setAttribute('popover', this.useClick ? 'auto' : 'manual');
+    this.setAttribute('popover', this.trigger === 'hover' ? 'manual' : 'auto');
     this.#updateJslog();
   }
 
@@ -474,6 +485,9 @@ export class Tooltip extends HTMLElement {
   #setClosing = (event: Event): void => {
     if ((event as ToggleEvent).newState === 'closed') {
       this.#closing = true;
+      if (this.#timeout) {
+        window.clearTimeout(this.#timeout);
+      }
     }
   };
 
@@ -521,9 +535,10 @@ export class Tooltip extends HTMLElement {
       // as we always want to support ESC to close.
       this.#anchor.addEventListener('keydown', this.#keyDown);
 
-      if (this.useClick) {
+      if (this.trigger === 'click' || this.trigger === 'both') {
         this.#anchor.addEventListener('click', this.toggle);
-      } else {
+      }
+      if (this.trigger === 'hover' || this.trigger === 'both') {
         this.#anchor.addEventListener('mouseenter', this.showTooltip);
         if (!this.useHotkey) {
           this.#anchor.addEventListener('focus', this.showTooltip);