refactor(Tooltip): use CSS instead of JS for tooltip display

1024pix · Jun 13, 2024 · 4e70a8f · 4e70a8f
1 parent a26437a
commit 4e70a8f
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 55 deletions.
diff --git a/addon/components/pix-tooltip.hbs b/addon/components/pix-tooltip.hbs
@@ -1,12 +1,4 @@
-<div
-  class="pix-tooltip"
-  {{on-escape-action this.hideTooltip}}
-  {{on "mouseover" this.showTooltip}}
-  {{on "mouseleave" this.hideTooltipOnMouseOut}}
-  {{on "focusin" this.showTooltip}}
-  {{on "focusout" this.hideTooltip}}
-  ...attributes
->
+<div class="pix-tooltip" ...attributes>
   {{#if (has-block "triggerElement")}}
     <span class="pix-tooltip__trigger-element">
       {{yield to="triggerElement"}}

diff --git a/addon/components/pix-tooltip.js b/addon/components/pix-tooltip.js
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class PixTooltip extends Component {
@@ -22,25 +21,4 @@ export default class PixTooltip extends Component {
   get display() {
     return typeof this.args.hide === 'undefined' || !this.args.hide;
   }
-
-  @action
-  showTooltip() {
-    this.isVisible = true;
-  }
-
-  @action
-  hideTooltip() {
-    this.isVisible = false;
-  }
-
-  @action
-  hideTooltipOnMouseOut(event) {
-    const isFocused = event.target.contains(document.activeElement);
-
-    if (isFocused) {
-      return;
-    }
-
-    this.hideTooltip(event);
-  }
 }
diff --git a/addon/styles/_pix-tooltip.scss b/addon/styles/_pix-tooltip.scss
@@ -8,6 +8,27 @@
     display: block;
     width: 100%;
   }
+
+  &__trigger-element:hover + .pix-tooltip__content {
+    display: block;
+    opacity: 1;
+  }
+}
+
+@supports selector(:has(*)) {
+  .pix-tooltip:has(.pix-tooltip__trigger-element :focus-visible) {
+    .pix-tooltip__content {
+      display: block;
+      opacity: 1;
+    }
+  }
+}
+
+@supports not selector(:has(*)) {
+  .pix-tooltip__trigger-element:focus-within + .pix-tooltip__content {
+    display: block;
+    opacity: 1;
+  }
 }
 
 .pix-tooltip__content {
@@ -27,11 +48,6 @@
   transition: opacity 0.3s;
   pointer-events: none;
 
-  &--visible {
-    display: block;
-    opacity: 1;
-  }
-
   &--inline {
     white-space: nowrap;
   }

diff --git a/app/stories/pix-tooltip.mdx b/app/stories/pix-tooltip.mdx
@@ -61,6 +61,7 @@ Infobulle en position `top`, fond sombre (par défaut).
 
 <Story of={ComponentStories.Default} height={200} />
 <Story of={ComponentStories.WithIcon} height={200} />
+<Story of={ComponentStories.WithInput} height={200} />
 
 ## Is Light
 

diff --git a/app/stories/pix-tooltip.stories.js b/app/stories/pix-tooltip.stories.js
@@ -118,6 +118,23 @@ const TemplateWithIconElement = (args) => {
   };
 };
 
+const TemplateWithInputElement = (args) => {
+  return {
+    template: hbs`<PixTooltip @id={{this.id}} @isInline='true'>
+  <:triggerElement>
+    <PixInput @id="some-id">
+      <:label>{{this.label}}</:label>
+    </PixInput>
+  </:triggerElement>
+
+  <:tooltip>
+    {{this.text}}
+  </:tooltip>
+</PixTooltip>`,
+    context: args,
+  };
+};
+
 export const Default = Template.bind({});
 Default.args = {
   text: 'Hello World',
@@ -184,6 +201,12 @@ WithIcon.args = {
   label: 'À survoler pour voir la tooltip',
 };
 
+export const WithInput = TemplateWithInputElement.bind({});
+WithInput.args = {
+  text: 'Hello World',
+  label: 'À survoler pour voir la tooltip',
+};
+
 export const hide = Template.bind({});
 hide.args = {
   label: "Survoler ici n'affiche pas tooltip",

diff --git a/tests/integration/components/pix-tooltip-test.js b/tests/integration/components/pix-tooltip-test.js
@@ -58,25 +58,6 @@ module('Integration | Component | pix-tooltip', function (hooks) {
     assert.notOk(tooltipContentElement);
   });
 
-  test('it dismissed tooltip on escape keyup', async function (assert) {
-    // given
-    const screen = await render(hbs`<PixTooltip>
-  <:triggerElement>
-    template block text
-  </:triggerElement>
-  <:tooltip></:tooltip>
-</PixTooltip>`);
-
-    // when
-    await screen.getByText('template block text').focus();
-
-    await userEvent.keyboard('[Escape]');
-
-    // then
-    assert.contains('template block text');
-    assert.dom('.pix-tooltip__content').isNotVisible();
-  });
-
   module('tooltip position', function () {
     const TOOLTIP_POSITION_SELECTOR = 'pix-tooltip__content--';