fixup! fixup! fixup! Feat(web): Tooltip hover

lmc-eu · Feb 13, 2024 · 1551c6e · 1551c6e
1 parent 1cebdc6
commit 1551c6e
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 12 deletions.
diff --git a/packages/web/src/js/Tooltip.ts b/packages/web/src/js/Tooltip.ts
@@ -32,7 +32,7 @@ type Config = {
   flipFallbackPlacements: string;
   placement: FloatingUI.Placement;
   placementControlled: boolean;
-  triggers: string;
+  trigger: string;
 };
 
 export const transformStringToArray = (str: string) =>
@@ -95,7 +95,7 @@ class Tooltip extends BaseComponent {
     const config = this.config as Config;
     const defaultTriggers = [TRIGGER_CLICK, TRIGGER_HOVER];
 
-    return config.triggers ? transformStringToArray(config.triggers) : defaultTriggers;
+    return config.trigger ? transformStringToArray(config.trigger) : defaultTriggers;
   }
 
   toggle() {
@@ -161,12 +161,6 @@ class Tooltip extends BaseComponent {
     }
 
     EventHandler.trigger(this.element, Tooltip.eventName(EVENT_SHOWN));
-
-    if (this.isHovered === false) {
-      this.leave();
-    }
-
-    this.isHovered = false;
   }
 
   hide() {

diff --git a/packages/web/src/scss/components/Tooltip/README.md b/packages/web/src/scss/components/Tooltip/README.md
@@ -261,7 +261,7 @@ works and to get an idea of all possible cases you may need to cover.
 | `data-spirit-flip-fallback-axis-side-direction` | ["none" \| "start" \| "end" ]                | "none"         | ✕        | Whether to allow [fallback to the opposite axis][floating-ui-flip-fallback-axis-side-direction] if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction. |
 | `data-spirit-flip-fallback-placements`          | string                                       | -              | ✕        | This describes a list of [explicit placements][floating-ui-flip-fallback-placements] to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set `"top, right, bottom"`                                                  |
 | `data-spirit-placement`                         | [Placement Dictionary][dictionary-placement] | "bottom"       | ✕        | Placement of tooltip                                                                                                                                                                                                                                                       |
-| `data-spirit-triggers`                          | string                                       | "click, hover" | ✕        | How tooltip is triggered: click, hover. You may pass multiple triggers; separate them with a comma.                                                                                                                                                                        |
+| `data-spirit-trigger`                           | string                                       | "click, hover" | ✕        | How tooltip is triggered: click, hover. You may pass multiple triggers; separate them with a comma.                                                                                                                                                                        |
 
 👆 All the attributes mentioned above can be also set as an object in the `config` attribute, like this: `data-spirit-config='{"flip": "true", "flipFallbackPlacements": "top, right, bottom"}'`. Please note that this configuration has lower priority than individual attributes and will be overwritten by them.
 

diff --git a/packages/web/src/scss/components/Tooltip/dismissible-tooltip.mjs b/packages/web/src/scss/components/Tooltip/dismissible-tooltip.mjs
@@ -8,7 +8,7 @@ const myTooltip = new Tooltip(myTooltipEl);
 
 // show tooltip if it was toggled
 if (window.localStorage.getItem(storageName)) {
-  myTooltip.enter();
+  myTooltip.toggle();
 }
 
 // tooltip trigger button

diff --git a/packages/web/src/scss/components/Tooltip/floating-ui-example.mjs b/packages/web/src/scss/components/Tooltip/floating-ui-example.mjs
@@ -8,8 +8,6 @@ const select = document.getElementById('my-advanced-select');
 const selectFallback = document.getElementById('my-advanced-select-fallback');
 const tooltip = Tooltip.getOrCreateInstance(document.getElementById('my-advanced-tooltip'));
 
-tooltip.show();
-
 checkboxFlip.addEventListener('change', () => tooltip.updateConfig({ enableFlipping: checkboxFlip.checked }));
 
 checkboxFlipCrossAxis.addEventListener('change', () => {