Add support for keyboard via a @useFocus argument

README.md

@@ -84,6 +84,10 @@ Optional. The show delay will prevent the tooltip from being shown until the spe
 
 Optional. The hide delay will prevent the tooltip from being hidden until the specified milliseconds have passed after leaving the reference element.
 
+#### `@useFocus`
+
+Optional. By default, tooltips will only show when hovering over the reference element. Use this argument to also show the tooltip when the reference element is focused with keyboard.
+
 #### `@stickyID`
 
 Optional. You can group tooltips together with a sticky identifier. When a tooltip from a group of tooltips all with the same identifier is shown, then other tooltips in that group will show instantly - ignoring their show delay. The term sticky is used because it feels as if the tooltips are stuck open.
@@ -100,22 +104,21 @@ In the following example, there is a show delay of `300`ms before a tooltip will
 
 <details>
   <summary>Example</summary>
-  
+
 ```handlebars
 {{! application.gjs }}
 <LinkTo @route='user' @model={{123}}>
   Preview user
   <UserTooltip @id={{123}} />
 </LinkTo>
-
-````
+```
 
 ```handlebars
 {{! user-tooltip.gjs }}
 <Tooltip @showDelay={{300}} @onLoad={{fn this.loadUser @id}} as |tooltip|>
   {{tooltip.data.user.name}}
 </Tooltip>
-````
+```
 
 </details>
 

addon/components/tooltip.gjs

@@ -4,7 +4,6 @@ import { getPosition, getCoords } from '@zestia/position-utils';
 import { guidFor } from '@ember/object/internals';
 import { htmlSafe } from '@ember/template';
 import { inject } from '@ember/service';
-import { on } from '@ember/modifier';
 import { tracked } from '@glimmer/tracking';
 import { waitFor } from '@ember/test-waiters';
 import { waitForAnimation } from '@zestia/animation-utils';
@@ -29,6 +28,8 @@ export default class TooltipComponent extends Component {
   isLoaded;
   isOverTooltipElement;
   isOverTooltipperElement;
+  tooltipperElementIsFocused;
+  tooltipElementIsFocused;
   loadDuration = 0;
   showTimer;
   stickyTimer;
@@ -84,12 +85,22 @@ export default class TooltipComponent extends Component {
   }
 
   get needsToShowTooltip() {
-    return (
-      !(this.isOverTooltipperElement && this.args.show === false) &&
-      (this.isOverTooltipperElement ||
-        this.isOverTooltipElement ||
-        this.args.show)
-    );
+    if (this.args.show === false) {
+      return false;
+    }
+
+    if (this.isOverTooltipperElement || this.isOverTooltipElement) {
+      return true;
+    }
+
+    if (
+      this.args.useFocus &&
+      (this.tooltipperElementIsFocused || this.tooltipElementIsFocused)
+    ) {
+      return true;
+    }
+
+    return this.args.show;
   }
 
   get tooltips() {
@@ -170,15 +181,10 @@ export default class TooltipComponent extends Component {
   }
 
   @action
-  async handleMouseEnterTooltipperElement() {
+  handleMouseEnterTooltipperElement() {
     this.isOverTooltipperElement = true;
-    this.loadDuration = 0;
 
-    if (this.shouldLoadEagerly) {
-      await this._load();
-    }
-
-    this._scheduleShowTooltip();
+    this._prepareToShowTooltip();
   }
 
   @action
@@ -200,6 +206,32 @@ export default class TooltipComponent extends Component {
     this._scheduleHideTooltip();
   }
 
+  @action
+  handleFocusTooltipperElement() {
+    this.tooltipperElementIsFocused = true;
+
+    this._prepareToShowTooltip();
+  }
+
+  @action
+  handleBlurTooltipperElement() {
+    this.tooltipperElementIsFocused = false;
+
+    this._scheduleHideTooltip();
+  }
+
+  @action
+  handleFocusTooltipElement() {
+    this.tooltipElementIsFocused = true;
+  }
+
+  @action
+  handleBlurTooltipElement() {
+    this.tooltipElementIsFocused = false;
+
+    this._scheduleHideTooltip();
+  }
+
   @action
   hide() {
     return this._hideTooltip();
@@ -245,6 +277,16 @@ export default class TooltipComponent extends Component {
     this._showTooltip();
   }
 
+  async _prepareToShowTooltip() {
+    this.loadDuration = 0;
+
+    if (this.shouldLoadEagerly) {
+      await this._load();
+    }
+
+    this._scheduleShowTooltip();
+  }
+
   async _showTooltip() {
     this.shouldShowTooltip = true;
 
@@ -418,16 +460,46 @@ export default class TooltipComponent extends Component {
     return () => this._stopTether();
   });
 
-  events = modifier((element, [otherElement]) => {
+  tooltipperEvents = modifier((element, [otherElement]) => {
     this.element = element;
     const { tooltipperElement: el } = this;
 
     this._add(el, 'mouseenter', this.handleMouseEnterTooltipperElement);
     this._add(el, 'mouseleave', this.handleMouseLeaveTooltipperElement);
 
+    if (this.args.useFocus) {
+      this._add(el, 'focus', this.handleFocusTooltipperElement);
+      this._add(el, 'blur', this.handleBlurTooltipperElement);
+    }
+
     return () => {
       this._remove(el, 'mouseenter', this.handleMouseEnterTooltipperElement);
       this._remove(el, 'mouseleave', this.handleMouseLeaveTooltipperElement);
+
+      if (this.args.useFocus) {
+        this._remove(el, 'focus', this.handleFocusTooltipperElement);
+        this._remove(el, 'blur', this.handleBlurTooltipperElement);
+      }
+    };
+  });
+
+  tooltipEvents = modifier((element) => {
+    this._add(element, 'mouseenter', this.handleMouseEnterTooltip);
+    this._add(element, 'mouseleave', this.handleMouseLeaveTooltip);
+
+    if (this.args.useFocus) {
+      this._add(element, 'focusin', this.handleFocusTooltipElement);
+      this._add(element, 'focusout', this.handleBlurTooltipElement);
+    }
+
+    return () => {
+      this._remove(element, 'mouseenter', this.handleMouseEnterTooltip);
+      this._remove(element, 'mouseleave', this.handleMouseLeaveTooltip);
+
+      if (this.args.useFocus) {
+        this._remove(element, 'focusin', this.handleFocusTooltipElement);
+        this._remove(element, 'focusout', this.handleBlurTooltipElement);
+      }
     };
   });
 
@@ -462,7 +534,7 @@ export default class TooltipComponent extends Component {
     <span
       class="__tooltip__"
       hidden
-      {{this.events @element}}
+      {{this.tooltipperEvents @element}}
       {{this.className}}
       {{this.visibility @show}}
       {{this.loading this.isLoading}}
@@ -478,8 +550,7 @@ export default class TooltipComponent extends Component {
           style={{this.tooltipStyle}}
           role="tooltip"
           aria-live="polite"
-          {{on "mouseenter" this.handleMouseEnterTooltip}}
-          {{on "mouseleave" this.handleMouseLeaveTooltip}}
+          {{this.tooltipEvents}}
           {{this.register}}
           {{this.aria}}
           {{this.position @position @columns @rows @destination @attachTo}}

tests/dummy/app/controllers/manual.js

@@ -6,12 +6,7 @@ export default class ManualPositioningController extends Controller {
   @tracked shouldShowTooltip;
 
   @action
-  showTooltip() {
-    this.shouldShowTooltip = true;
-  }
-
-  @action
-  hideTooltip() {
-    this.shouldShowTooltip = false;
+  toggleTooltip() {
+    this.shouldShowTooltip = !this.shouldShowTooltip;
   }
 }

tests/dummy/app/router.js

@@ -19,4 +19,5 @@ Router.map(function () {
   this.route('attach-to');
   this.route('sticky');
   this.route('tether');
+  this.route('use-focus');
 });

tests/dummy/app/styles/app.scss

@@ -8,3 +8,4 @@
 @use 'tables';
 @use 'util';
 @use 'tether';
+@use 'use-focus';

tests/dummy/app/styles/use-focus.scss

@@ -0,0 +1,5 @@
+.use-focus-page {
+  display: flex;
+  flex-direction: row;
+  gap: 14px;
+}

tests/dummy/app/templates/application.hbs

@@ -76,6 +76,12 @@
   <LinkTo @route="tether">
     Tether
   </LinkTo>
+
+  |
+
+  <LinkTo @route="use-focus">
+    Use Focus
+  </LinkTo>
 </p>
 
 {{outlet}}

tests/dummy/app/templates/manual.hbs

@@ -3,13 +3,7 @@
 </p>
 
 <div>
-  <input
-    type="text"
-    placeholder="Focus me"
-    aria-label="Example text area"
-    {{on "focus" this.showTooltip}}
-    {{on "blur" this.hideTooltip}}
-  />
+  <button type="button" {{on "click" this.toggleTooltip}}>Toggle Tooltip</button>
 
   {{#if this.shouldShowTooltip}}
     <Tooltip @show={{true}}>

tests/dummy/app/templates/use-focus.hbs

@@ -0,0 +1,35 @@
+<p>
+  Use Focus (for keyboard support)
+</p>
+
+<div class="use-focus-page">
+  <button type="button">
+    I should show when focused with a keyboard
+
+    <Tooltip @useFocus={{true}}>
+      Hello World
+    </Tooltip>
+  </button>
+
+  <div tabindex="0">
+    Focus me (I have interactive children)
+    <Tooltip @useFocus={{true}}>
+      Hello
+      <a href="#">World</a>
+    </Tooltip>
+  </div>
+
+  <button type="button">
+    I should
+    <i>not</i>
+    show a tooltip when focused with a keyboard
+
+    <Tooltip @useFocus={{false}}>
+      Hello World
+    </Tooltip>
+  </button>
+</div>
+
+<div id="portal">
+  {{! tooltip rendered here }}
+</div>