refactor(Tooltip): improve tooltip display on focus

1024pix · Jun 17, 2024 · 6af7a51 · 6af7a51
1 parent a26437a
commit 6af7a51
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 12 deletions.
diff --git a/addon/components/pix-tooltip.hbs b/addon/components/pix-tooltip.hbs
@@ -1,5 +1,5 @@
 <div
-  class="pix-tooltip"
+  class="pix-tooltip {{if this.isTooltipVisible 'pix-tooltip--visible' ''}}"
   {{on-escape-action this.hideTooltip}}
   {{on "mouseover" this.showTooltip}}
   {{on "mouseleave" this.hideTooltipOnMouseOut}}
@@ -19,7 +19,6 @@
         id={{@id}}
         role="tooltip"
         class="pix-tooltip__content pix-tooltip__content--{{this.position}}
-          {{if this.isVisible 'pix-tooltip__content--visible'}}
           {{if @isInline 'pix-tooltip__content--inline'}}
           {{if @isLight 'pix-tooltip__content--light'}}
           {{if @isWide 'pix-tooltip__content--wide'}}"

diff --git a/addon/components/pix-tooltip.js b/addon/components/pix-tooltip.js
@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class PixTooltip extends Component {
-  @tracked isVisible = false;
+  @tracked isTooltipVisible = false;
 
   get position() {
     const correctsPosition = [
@@ -25,12 +25,12 @@ export default class PixTooltip extends Component {
 
   @action
   showTooltip() {
-    this.isVisible = true;
+    this.isTooltipVisible = true;
   }
 
   @action
   hideTooltip() {
-    this.isVisible = false;
+    this.isTooltipVisible = false;
   }
 
   @action

diff --git a/addon/styles/_pix-tooltip.scss b/addon/styles/_pix-tooltip.scss
@@ -8,30 +8,46 @@
     display: block;
     width: 100%;
   }
+
+  &__trigger-element:hover + .pix-tooltip__content {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+@supports selector(:has(*)) {
+  .pix-tooltip--visible:has(.pix-tooltip__trigger-element :focus-visible) {
+    .pix-tooltip__content {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}
+
+@supports not selector(:has(*)) {
+  .pix-tooltip--visible .pix-tooltip__trigger-element:focus-within + .pix-tooltip__content {
+    visibility: visible;
+    opacity: 1;
+  }
 }
 
 .pix-tooltip__content {
   @extend %pix-shadow-md;
 
   position: absolute;
-  left: auto;
   z-index: 100;
-  display: none;
+  left: auto;
   padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
   color: var(--pix-neutral-0);
   font-size: 0.875rem;
   line-height: 1.4rem;
   background-color: var(--pix-neutral-900);
   border-radius: 6px;
+  visibility: hidden;
   opacity: 0;
   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",