fix(tooltip): tooltip positioning bug fix (#202)

src/components/tooltip/bl-tooltip.css

@@ -1,21 +1,10 @@
-:host {
-  --bl-tooltip-position: absolute;
-  --bl-tooltip-visibility: hidden;
-  --bl-tooltip-left: 0;
-  --bl-tooltip-top: 0;
-  --bl-tooltip-arrow-top: 0;
-  --bl-tooltip-arrow-bottom: 0;
-  --bl-tooltip-arrow-right: 0;
-  --bl-tooltip-arrow-left: 0;
-}
-
 .trigger {
   display: inline-block;
   cursor: pointer;
 }
 
 .tooltip {
-  position: var(--bl-tooltip-position);
+  position: fixed;
   box-sizing: border-box;
   border: none;
   background-color: var(--bl-color-secondary);
@@ -24,9 +13,9 @@
   pointer-events: none;
   font: var(--bl-font-title-3-regular);
   padding: var(--bl-size-m);
-  left: var(--bl-tooltip-left);
-  top: var(--bl-tooltip-top);
-  visibility: var(--bl-tooltip-visibility);
+  left: var(--bl-tooltip-left, 0);
+  top: var(--bl-tooltip-top, 0);
+  visibility: var(--bl-tooltip-visibility, hidden);
   z-index: 999;
   max-width: 424px;
 }
@@ -37,10 +26,10 @@
   width: var(--bl-size-2xs);
   height: var(--bl-size-2xs);
   transform: rotate(45deg);
-  top: var(--bl-tooltip-arrow-top);
-  bottom: var(--bl-tooltip-arrow-bottom);
-  right: var(--bl-tooltip-arrow-right);
-  left: var(--bl-tooltip-arrow-left);
+  top: var(--bl-tooltip-arrow-top, 0);
+  bottom: var(--bl-tooltip-arrow-bottom, 0);
+  right: var(--bl-tooltip-arrow-right, 0);
+  left: var(--bl-tooltip-arrow-left, 0);
 }
 
 .visible {

src/components/tooltip/bl-tooltip.stories.mdx

@@ -25,20 +25,20 @@ export const tooltipOpener = async ({ canvasElement }) => {
 }
 
 export const IconTriggerTemplate = (args) => html`
-<bl-tooltip placement="${ifDefined(args.placement)}" style='--bl-tooltip-position:fixed'>
+<bl-tooltip placement="${ifDefined(args.placement)}">
   <bl-button slot="tooltip-trigger" icon="settings" kind="text" label="Settings" variant="secondary"></bl-button>
   Settings
 </bl-tooltip>`
 
 export const ButtonTriggerTemplate = (args) => html`
-<bl-tooltip placement="${ifDefined(args.placement)}" style='--bl-tooltip-position:fixed'>
+<bl-tooltip placement="${ifDefined(args.placement)}">
   <bl-button slot="tooltip-trigger" icon="plus_fill"></bl-button>
   You can add text, photos and graphics. If you put a very long text, it will be wrapped after max-length of the tooltip.
 </bl-tooltip>`
 
 
 export const PlacementTemplate = (args) => html`
-<bl-tooltip placement="${ifDefined(args.placement)}" style="--bl-tooltip-position:fixed">
+<bl-tooltip placement="${ifDefined(args.placement)}">
   <bl-button slot="tooltip-trigger">${args.placement}</bl-button>
   You can use this section to cancel your order.
 </bl-tooltip>`
@@ -52,10 +52,6 @@ Tooltips display informative text when users hover over an element.
 Tooltip can be used with any trigger such as button, icon, text, etc.
 Only you have to give slot name as `tooltip-trigger`. The remaining content will be shown in the tooltip hovering over the trigger component.
 
-Tooltip position is absolute as default. If your wrapper has `position:relative` and `overflow:hidden` the tooltip is clipped and isn't shown correctly.
-
-In this case, you should give `position:fixed` as below.
-
 <Canvas>
   <Story name="Usage With Icon Button" play={tooltipOpener}>
     {IconTriggerTemplate.bind({})}

src/components/tooltip/bl-tooltip.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { computePosition, flip, shift, offset, arrow, Strategy } from '@floating-ui/dom';
+import { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';
 import { classMap } from 'lit/directives/class-map.js';
 import { ReferenceElement } from '@floating-ui/core';
 import style from './bl-tooltip.css';
@@ -46,7 +46,6 @@ export default class BlTooltip extends LitElement {
   placement: Placement = 'top';
 
   @state() private _visible = false;
-  @state() private _position: Strategy = 'absolute';
 
   /**
    * Fires when hovering over a trigger
@@ -58,18 +57,10 @@ export default class BlTooltip extends LitElement {
    */
   @event('bl-tooltip-hide') private onHide: EventDispatcher<string>;
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    setTimeout(() => {
-      this._position = getComputedStyle(this).getPropertyValue('--bl-tooltip-position') as Strategy;
-    });
-  }
-
   private setTooltip() {
     computePosition(this.trigger, this.tooltip, {
       placement: this.placement,
-      strategy: this._position,
+      strategy: 'fixed',
       middleware: [
         offset(8),
         shift({ padding: 5 }),
@@ -88,13 +79,13 @@ export default class BlTooltip extends LitElement {
       const tooltipPlacement = placement.split('-')[0] as keyof typeof arrowDirections;
       const arrowDirection = arrowDirections[tooltipPlacement];
 
-      this.style.setProperty('--bl-tooltip-left', `${x}px`);
-      this.style.setProperty('--bl-tooltip-top', `${y}px`);
-      this.style.setProperty('--bl-tooltip-arrow-left', arrowX);
-      this.style.setProperty('--bl-tooltip-arrow-top', arrowY);
-      this.style.setProperty('--bl-tooltip-arrow-bottom', '0');
-      this.style.setProperty('--bl-tooltip-arrow-right', '0');
-      this.style.setProperty(`--bl-tooltip-arrow-${arrowDirection}`, '-4px');
+      this.tooltip.style.setProperty('--bl-tooltip-left', `${x}px`);
+      this.tooltip.style.setProperty('--bl-tooltip-top', `${y}px`);
+      this.arrow.style.setProperty('--bl-tooltip-arrow-left', arrowX);
+      this.arrow.style.setProperty('--bl-tooltip-arrow-top', arrowY);
+      this.arrow.style.setProperty('--bl-tooltip-arrow-bottom', '0');
+      this.arrow.style.setProperty('--bl-tooltip-arrow-right', '0');
+      this.arrow.style.setProperty(`--bl-tooltip-arrow-${arrowDirection}`, '-4px');
     });
   }