feat(popover): max-width and border-size css properties are added

src/components/tooltip/bl-tooltip.css

@@ -3,34 +3,17 @@
   cursor: pointer;
 }
 
-.tooltip {
-  position: fixed;
-  box-sizing: border-box;
-  border: none;
-  background-color: var(--bl-color-secondary);
-  color: var(--bl-color-content-primary-contrast);
-  border-radius: var(--bl-size-3xs);
-  pointer-events: none;
-  font: var(--bl-font-title-3-regular);
-  padding: var(--bl-size-m);
-  z-index: 999;
-  width: max-content;
-  hyphens: auto;
+.wrapper{
+  display: inline-block;
+}
 
+.tooltip {
+  --bl-popover-background-color: var(--bl-color-secondary);
+  --bl-popover-border-color: var(--bl-color-secondary);
+  --bl-color-content-primary: white;
+  --bl-popover-arrow-display: inline-block;
   --max-viewport: calc(100vw - var(--bl-size-s));
   --tooltip-max-width: 424px;
 
   max-width: min(var(--max-viewport), var(--tooltip-max-width));
 }
-
-.tooltip:not(.visible) {
-  visibility: hidden;
-}
-
-.arrow {
-  position: absolute;
-  background-color: var(--bl-color-secondary);
-  width: var(--bl-size-2xs);
-  height: var(--bl-size-2xs);
-  transform: rotate(45deg);
-}

src/components/tooltip/bl-tooltip.test.ts

@@ -2,6 +2,7 @@ import { assert, elementUpdated, expect, fixture, html, oneEvent } from '@open-w
 import { sendMouse } from '@web/test-runner-commands';
 import BlTooltip from './bl-tooltip';
 import type typeOfBlTooltip from './bl-tooltip';
+import type typeOfBlPopover from "../popover/bl-popover";
 
 describe('bl-tooltip', () => {
   it('should be defined tooltip instance', () => {
@@ -25,13 +26,13 @@ describe('bl-tooltip', () => {
        class="trigger"
        name="tooltip-trigger">
       </slot>
-      <div class='tooltip'>
+      <div class='wrapper'>
+      <bl-popover class='tooltip' placement='top'>
         <slot
-          aria-live="off"
           id="tooltip"
           role="tooltip">
         </slot>
-        <div aria-hidden="true" class="arrow"></div>
+       </bl-popover>
       </div>
       `
     );
@@ -53,7 +54,6 @@ describe('bl-tooltip', () => {
 
     //then
     expect(el.shadowRoot?.querySelector('.trigger')).to.exist;
-    expect(el.shadowRoot?.querySelector('.arrow')).to.exist;
     expect(el.shadowRoot?.querySelector('.tooltip')).to.exist;
   });
 
@@ -92,15 +92,15 @@ describe('bl-tooltip', () => {
         ><button slot="tooltip-trigger">Test</button> Test Tooltip</bl-tooltip
       >`
     );
-    const tooltip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement;
+    const tooltipPopover = el.shadowRoot?.querySelector('.tooltip') as typeOfBlPopover;
     const trigger = document.querySelector('button') as HTMLElement;
     const { x, y } = getMiddleOfElement(trigger);
 
     //when
     await sendMouse({ type: 'move', position: [x, y] });
 
     //then
-    expect(tooltip).to.have.class('visible');
+    expect(tooltipPopover.visible).to.be.true;
     expect(el.visible).to.be.true;
   });
 

src/components/tooltip/bl-tooltip.ts

@@ -1,10 +1,11 @@
 import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { computePosition, flip, shift, offset, arrow, inline, autoUpdate } from '@floating-ui/dom';
-import { classMap } from 'lit/directives/class-map.js';
 import { ReferenceElement } from '@floating-ui/core';
 import style from './bl-tooltip.css';
 import { event, EventDispatcher } from '../../utilities/event';
+import "../popover/bl-popover";
+import {ifDefined} from "lit/directives/if-defined.js";
+import type BlPopover from "../popover/bl-popover";
 
 export type Placement =
   | 'top-start'
@@ -32,9 +33,9 @@ export default class BlTooltip extends LitElement {
     return [style];
   }
 
-  @query('.tooltip') private tooltip: HTMLElement;
+  // @query('.tooltip') private tooltip: HTMLElement;
   @query('.trigger') private trigger: ReferenceElement;
-  @query('.arrow') private arrow: HTMLElement;
+  @query('bl-popover') private popover: BlPopover;
 
   /**
    * Sets placement of the tooltip
@@ -44,6 +45,8 @@ export default class BlTooltip extends LitElement {
 
   @state() private _visible = false;
 
+
+
   /**
    * Fires when hovering over a trigger
    */
@@ -65,58 +68,17 @@ export default class BlTooltip extends LitElement {
 
     this.removeEventListener('keydown', this.handleKeyDown);
 
-    this.popoverAutoUpdateCleanup && this.popoverAutoUpdateCleanup();
   }
 
-  private popoverAutoUpdateCleanup: () => void;
-
-  private setTooltip() {
-    this.popoverAutoUpdateCleanup = autoUpdate(this.trigger, this.tooltip, () => {
-      computePosition(this.trigger, this.tooltip, {
-        placement: this.placement,
-        strategy: 'fixed',
-        middleware: [
-          offset(8),
-          shift({ padding: 5 }),
-          flip(),
-          inline(),
-          arrow({ element: this.arrow, padding: 5 }),
-        ],
-      }).then(({ x, y, placement, middlewareData }) => {
-        Object.assign(this.tooltip.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-
-        if (middlewareData.arrow) {
-          const {x: arrowX, y: arrowY} = middlewareData.arrow;
-
-          Object.assign(this.arrow.style, {
-            left: arrowX != null ? `${arrowX}px` : '',
-            top: arrowY != null ? `${arrowY}px` : '',
-          });
-
-          const arrowFlipDirections = {
-            top: 'bottom',
-            right: 'left',
-            bottom: 'top',
-            left: 'right',
-          };
-          const tooltipPlacement = placement.split('-')[0] as keyof typeof arrowFlipDirections;
-          const arrowDirection = arrowFlipDirections[tooltipPlacement];
-
-          this.arrow.style.setProperty(arrowDirection, '-4px');
-        }
-      });
-    });
-  }
+
 
   /**
    * Shows tooltip
    */
   show() {
-    this._visible = true;
-    this.setTooltip();
+    this._visible = true
+    this.popover.target = this.trigger;
+    this.popover.show();
     this.onShow('Show event fired!');
   }
 
@@ -125,6 +87,7 @@ export default class BlTooltip extends LitElement {
    */
   hide() {
     this._visible = false;
+    this.popover.hide();
     this.onHide('Hide event fired!');
   }
 
@@ -143,11 +106,6 @@ export default class BlTooltip extends LitElement {
   }
 
   render(): TemplateResult {
-    const classes = classMap({
-      tooltip: true,
-      visible: this._visible,
-    });
-
     return html`<slot
         class="trigger"
         name="tooltip-trigger"
@@ -158,9 +116,10 @@ export default class BlTooltip extends LitElement {
         @mouseleave=${() => this.hide()}
       >
       </slot>
-      <div class=${classes}>
-        <slot id="tooltip" role="tooltip" aria-live=${this._visible ? 'polite' : 'off'}></slot>
-        <div class="arrow" aria-hidden="true"></div>
+      <div class="wrapper">
+        <bl-popover class="tooltip" .target="${this.trigger}" placement="${ifDefined(this.placement)}">
+          <slot id="tooltip" role="tooltip"></slot>
+        </bl-popover>
       </div>`;
   }
 }