@ukic/canary-web-components 2.0.0-canary.0 → 2.0.0-canary.1

package/dist/collection/components/ic-tooltip/ic-tooltip.js

@@ -4,9 +4,11 @@ import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class Tooltip {
   constructor() {
     this.delayedHideEvents = ["mouseleave"];
+    this.dialogOverflow = false;
     this.instantHideEvents = ["focusout"];
     this.mouseOverTool = false;
     this.persistTooltip = false;
+    this.onDialog = false;
     this.screenReaderOnlyStyles = {
       position: "absolute",
       left: "-10000px",
@@ -22,6 +24,13 @@ export class Tooltip {
     ];
     this.show = (popper) => {
       this.toolTip.setAttribute("data-show", "");
+      if (this.onDialog) {
+        this.el.classList.add("on-dialog");
+        const dialogEl = this.icDialogEl.shadowRoot
+          .querySelector("dialog")
+          .getBoundingClientRect();
+        this.getTooltipTranslate(dialogEl);
+      }
       popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
           ...options.modifiers,
           { name: "eventListeners", enabled: true },
@@ -74,6 +83,77 @@ export class Tooltip {
       });
       document[method]("keydown", (event) => this.handleKeyDown(event.key));
     };
+    /**
+     * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
+     * @param show Whether to show or hide the tooltip
+     * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover
+     */
+    // @Method()
+    // async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {
+    //   this.persistTooltip = persistTooltip;
+    //   show ? this.show() : this.hide();
+    // }
+    this.getTooltipTranslate = (dialogEl) => {
+      const child = this.el.children[0].getBoundingClientRect();
+      let tooltipX;
+      let tooltipY;
+      switch (this.placement) {
+        case "bottom":
+          tooltipX = child.left - dialogEl.left - 0.5 * child.width;
+          tooltipY = child.bottom - dialogEl.top;
+          break;
+        case "bottom-start":
+          tooltipX = child.left - dialogEl.left;
+          tooltipY = child.bottom - dialogEl.top;
+          break;
+        case "bottom-end":
+          tooltipX = child.right - dialogEl.right;
+          tooltipY = child.bottom - dialogEl.top;
+          break;
+        case "top":
+          tooltipX = child.left - dialogEl.left - 0.5 * child.width;
+          tooltipY = child.top - dialogEl.bottom;
+          break;
+        case "top-start":
+          tooltipX = child.left - dialogEl.left;
+          tooltipY = child.top - dialogEl.bottom;
+          break;
+        case "top-end":
+          tooltipX = child.right - dialogEl.right;
+          tooltipY = child.top - dialogEl.bottom;
+          break;
+        case "left":
+        case "left-start":
+          tooltipX = child.right - dialogEl.right - child.width;
+          tooltipY = child.bottom - dialogEl.top - child.height;
+          break;
+        case "left-end":
+          tooltipX = child.right - dialogEl.right - child.width;
+          tooltipY = child.top - dialogEl.bottom + child.height;
+          break;
+        case "right":
+        case "right-start":
+          tooltipX = child.left - dialogEl.left + child.width;
+          tooltipY = child.bottom - dialogEl.top - child.height;
+          break;
+        case "right-end":
+          tooltipX = child.left - dialogEl.left + child.width;
+          tooltipY = child.top - dialogEl.bottom + child.height;
+          break;
+      }
+      if (this.dialogOverflow && tooltipX < 0) {
+        if (this.placement.includes("top") || this.placement.includes("bottom")) {
+          this.toolTip.style.setProperty("--tooltip-arrow-translate", `${tooltipX}px`);
+          tooltipX = child.left - dialogEl.left;
+        }
+        if (this.placement.includes("left")) {
+          this.placement = "right";
+          tooltipX = child.left - dialogEl.left + child.width;
+        }
+      }
+      this.toolTip.style.setProperty("--tooltip-translate-x", `${tooltipX}px`);
+      this.toolTip.style.setProperty("--tooltip-translate-y", `${tooltipY}px`);
+    };
     this.disableClick = false;
     this.disableHover = false;
     this.placement = "bottom";
@@ -81,16 +161,18 @@ export class Tooltip {
     this.label = undefined;
   }
   updateLabel(newValue) {
-    const describedBySpan = this.el.previousElementSibling;
-    if (describedBySpan !== null) {
-      describedBySpan.innerText = newValue;
+    if (this.ariaDescribedBy !== null) {
+      this.ariaDescribedBy.innerText = newValue;
     }
   }
   disconnectedCallback() {
     this.manageEventListeners("remove");
-    this.popperInstance.destroy();
+    if (this.popperInstance !== undefined) {
+      this.popperInstance.destroy();
+    }
   }
   componentDidLoad() {
+    var _a;
     this.popperInstance = createPopper(this.el, this.toolTip, {
       placement: this.placement,
       modifiers: [
@@ -113,16 +195,110 @@ export class Tooltip {
       ],
     });
     this.manageEventListeners("add");
+    this.icDialogEl = this.el.closest("ic-dialog");
+    this.dialogOverflow =
+      ((_a = this.icDialogEl) === null || _a === void 0 ? void 0 : _a.getAttribute("data-overflow")) === "true";
+    this.onDialog = this.icDialogEl !== null;
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tooltip");
     if (this.target !== undefined) {
-      const ariaDescribedBy = document.createElement("span");
-      ariaDescribedBy.id = `ic-tooltip-${this.target}`;
-      ariaDescribedBy.innerText = this.label;
-      ariaDescribedBy.classList.add("ic-tooltip-label");
-      Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);
-      this.el.insertAdjacentElement("beforebegin", ariaDescribedBy);
+      this.ariaDescribedBy = document.createElement("span");
+      this.ariaDescribedBy.id = `ic-tooltip-${this.target}`;
+      this.ariaDescribedBy.innerText = this.label;
+      this.ariaDescribedBy.classList.add("ic-tooltip-label");
+      Object.assign(this.ariaDescribedBy.style, this.screenReaderOnlyStyles);
+      this.el.insertAdjacentElement("beforebegin", this.ariaDescribedBy);
     }
   }
+  // private show = () => {
+  //   this.toolTip.setAttribute("data-show", "");
+  //   if (this.onDialog) {
+  //     this.el.classList.add("on-dialog");
+  //     const dialogEl = this.icDialogEl.shadowRoot
+  //       .querySelector("dialog")
+  //       .getBoundingClientRect();
+  //     this.getTooltipTranslate(dialogEl);
+  //   }
+  //   this.popperInstance = createPopper(this.el, this.toolTip, {
+  //     placement: this.placement,
+  //     modifiers: [
+  //       {
+  //         name: "offset",
+  //         options: {
+  //           offset: [0, 10],
+  //         },
+  //       },
+  //       {
+  //         name: "arrow",
+  //         options: {
+  //           element: this.arrow,
+  //         },
+  //       },
+  //       {
+  //         name: "eventListeners",
+  //         options: { scroll: false, resize: false },
+  //       },
+  //     ],
+  //   });
+  // };
+  // private hide = () => {
+  //   this.toolTip.removeAttribute("data-show");
+  //   this.persistTooltip = false;
+  // };
+  // private checkCloseTooltip = () => {
+  //   setTimeout(() => {
+  //     if (!this.mouseOverTool && !this.persistTooltip) {
+  //       this.hide();
+  //     }
+  //   }, 100);
+  // };
+  // private mouseEnterTooltip = () => {
+  //   this.mouseOverTool = true;
+  // };
+  // private mouseLeaveTooltip = () => {
+  //   this.mouseOverTool = false;
+  //   this.checkCloseTooltip();
+  // };
+  // private handleKeyDown = (event: KeyboardEvent) => {
+  //   if (event.key === "Escape" && !this.persistTooltip) {
+  //     this.hide();
+  //   }
+  // };
+  // private manageEventListeners = (action: "add" | "remove") => {
+  //   const method =
+  //     action === "add" ? "addEventListener" : "removeEventListener";
+  //   this.showEvents.forEach((event) => {
+  //     this.el[method](event, this.show);
+  //     if (this.toolTip !== undefined) {
+  //       this.toolTip[method](event, this.mouseEnterTooltip);
+  //     }
+  //   });
+  //   if (!this.persistTooltip) {
+  //     this.instantHideEvents.forEach((event) => {
+  //       this.el[method](event, this.hide);
+  //     });
+  //   }
+  //   this.delayedHideEvents.forEach((event) => {
+  //     this.el[method](event, this.checkCloseTooltip);
+  //     if (this.toolTip !== undefined) {
+  //       this.toolTip[method](event, this.mouseLeaveTooltip);
+  //     }
+  //   });
+  //   document[method]("keydown", this.handleKeyDown);
+  // };
+  // this.manageEventListeners("add");
+  // onComponentRequiredPropUndefined(
+  //   [{ prop: this.label, propName: "label" }],
+  //   "Tooltip"
+  // );
+  // if (this.target !== undefined) {
+  //   const ariaDescribedBy = document.createElement("span");
+  //   ariaDescribedBy.id = `ic-tooltip-${this.target}`;
+  //   ariaDescribedBy.innerText = this.label;
+  //   ariaDescribedBy.classList.add("ic-tooltip-label");
+  //   Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);
+  //   this.el.insertAdjacentElement("beforebegin", ariaDescribedBy);
+  // }
+  // }
   /**
    * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
    * @param show Whether to show or hide the tooltip
@@ -188,14 +364,15 @@ export class Tooltip {
       },
       "placement": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "IcTooltipPlacements",
           "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
             "IcTooltipPlacements": {
               "location": "import",
-              "path": "./ic-tooltip.types"
+              "path": "./ic-tooltip.types",
+              "id": "src/components/ic-tooltip/ic-tooltip.types.ts::IcTooltipPlacements"
             }
           }
         },
@@ -265,7 +442,8 @@ export class Tooltip {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/ic-tooltip/ic-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private screenReaderOnlyStyles = {\n    position: \"absolute\",\n    left: \"-10000px\",\n    top: \"auto\",\n    width: \"1px\",\n    height: \"1px\",\n    overflow: \"hidden\",\n  };\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click or using the display method.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The position of the tool-tip in relation to the parent element.\n   */\n  @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @Watch(\"label\")\n  updateLabel(newValue: string): void {\n    const describedBySpan = this.el.previousElementSibling as HTMLElement;\n    if (describedBySpan !== null) {\n      describedBySpan.innerText = newValue;\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    this.popperInstance.destroy();\n  }\n\n  private show = (popper: Instance) => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: true },\n      ],\n    }));\n    popper.update();\n  };\n\n  private hide = (popper: Instance) => {\n    this.toolTip.removeAttribute(\"data-show\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: false },\n      ],\n    }));\n    this.persistTooltip = false;\n  };\n\n  private checkCloseTooltip = (popper: Instance) => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide(popper);\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = (popper: Instance) => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip(popper);\n  };\n\n  private handleKeyDown = (key: string) => {\n    if (key === \"Escape\" && !this.persistTooltip) {\n      this.hide(this.popperInstance);\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, () => this.show(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () => this.mouseEnterTooltip());\n      }\n    });\n\n    this.instantHideEvents.forEach((event) => {\n      this.el[method](\n        event,\n        () => !this.persistTooltip && this.hide(this.popperInstance)\n      );\n    });\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () =>\n          this.mouseLeaveTooltip(this.popperInstance)\n        );\n      }\n    });\n\n    document[method](\"keydown\", (event: KeyboardEvent) =>\n      this.handleKeyDown(event.key)\n    );\n  };\n\n  componentDidLoad(): void {\n    this.popperInstance = createPopper(this.el, this.toolTip, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 10],\n          },\n        },\n        {\n          name: \"arrow\",\n          options: {\n            element: this.arrow,\n          },\n        },\n        {\n          name: \"eventListeners\",\n          options: { scroll: false, resize: false },\n        },\n      ],\n    });\n\n    this.manageEventListeners(\"add\");\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n\n    if (this.target !== undefined) {\n      const ariaDescribedBy = document.createElement(\"span\");\n      ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n      ariaDescribedBy.innerText = this.label;\n      ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n      Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n      this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n    }\n  }\n\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show(this.popperInstance) : this.hide(this.popperInstance);\n  }\n\n  render() {\n    const { label } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n        >\n          <ic-typography variant=\"caption\">{label}</ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n            data-popper-arrow\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private ariaDescribedBy: HTMLElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogOverflow = false;\n  private icDialogEl: HTMLIcDialogElement;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private onDialog: boolean = false;\n  private screenReaderOnlyStyles = {\n    position: \"absolute\",\n    left: \"-10000px\",\n    top: \"auto\",\n    width: \"1px\",\n    height: \"1px\",\n    overflow: \"hidden\",\n  };\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click or using the display method.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The position of the tool-tip in relation to the parent element.\n   */\n  @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @Watch(\"label\")\n  updateLabel(newValue: string): void {\n    if (this.ariaDescribedBy !== null) {\n      this.ariaDescribedBy.innerText = newValue;\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  private show = (popper: Instance) => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n\n    if (this.onDialog) {\n      this.el.classList.add(\"on-dialog\");\n      const dialogEl = this.icDialogEl.shadowRoot\n        .querySelector(\"dialog\")\n        .getBoundingClientRect();\n\n      this.getTooltipTranslate(dialogEl);\n    }\n\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: true },\n      ],\n    }));\n    popper.update();\n  };\n\n  private hide = (popper: Instance) => {\n    this.toolTip.removeAttribute(\"data-show\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: false },\n      ],\n    }));\n    this.persistTooltip = false;\n  };\n\n  private checkCloseTooltip = (popper: Instance) => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide(popper);\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = (popper: Instance) => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip(popper);\n  };\n\n  private handleKeyDown = (key: string) => {\n    if (key === \"Escape\" && !this.persistTooltip) {\n      this.hide(this.popperInstance);\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, () => this.show(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () => this.mouseEnterTooltip());\n      }\n    });\n\n    this.instantHideEvents.forEach((event) => {\n      this.el[method](\n        event,\n        () => !this.persistTooltip && this.hide(this.popperInstance)\n      );\n    });\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () =>\n          this.mouseLeaveTooltip(this.popperInstance)\n        );\n      }\n    });\n\n    document[method](\"keydown\", (event: KeyboardEvent) =>\n      this.handleKeyDown(event.key)\n    );\n  };\n\n  componentDidLoad(): void {\n    this.popperInstance = createPopper(this.el, this.toolTip, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 10],\n          },\n        },\n        {\n          name: \"arrow\",\n          options: {\n            element: this.arrow,\n          },\n        },\n        {\n          name: \"eventListeners\",\n          options: { scroll: false, resize: false },\n        },\n      ],\n    });\n\n    this.manageEventListeners(\"add\");\n\n    this.icDialogEl = this.el.closest(\"ic-dialog\");\n    this.dialogOverflow =\n      this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n    this.onDialog = this.icDialogEl !== null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n\n    if (this.target !== undefined) {\n      this.ariaDescribedBy = document.createElement(\"span\");\n      this.ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n      this.ariaDescribedBy.innerText = this.label;\n      this.ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n      Object.assign(this.ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n      this.el.insertAdjacentElement(\"beforebegin\", this.ariaDescribedBy);\n    }\n  }\n\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  // @Method()\n  // async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n  //   this.persistTooltip = persistTooltip;\n  //   show ? this.show() : this.hide();\n  // }\n\n  private getTooltipTranslate = (dialogEl: DOMRect) => {\n    const child = this.el.children[0].getBoundingClientRect();\n    let tooltipX;\n    let tooltipY;\n    switch (this.placement) {\n      case \"bottom\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"top\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"left\":\n      case \"left-start\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"left-end\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n      case \"right\":\n      case \"right-start\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"right-end\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n    }\n    if (this.dialogOverflow && tooltipX < 0) {\n      if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n        this.toolTip.style.setProperty(\n          \"--tooltip-arrow-translate\",\n          `${tooltipX}px`\n        );\n        tooltipX = child.left - dialogEl.left;\n      }\n      if (this.placement.includes(\"left\")) {\n        this.placement = \"right\";\n        tooltipX = child.left - dialogEl.left + child.width;\n      }\n    }\n\n    this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n    this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n  };\n\n  // private show = () => {\n  //   this.toolTip.setAttribute(\"data-show\", \"\");\n\n  //   if (this.onDialog) {\n  //     this.el.classList.add(\"on-dialog\");\n  //     const dialogEl = this.icDialogEl.shadowRoot\n  //       .querySelector(\"dialog\")\n  //       .getBoundingClientRect();\n\n  //     this.getTooltipTranslate(dialogEl);\n  //   }\n\n  //   this.popperInstance = createPopper(this.el, this.toolTip, {\n  //     placement: this.placement,\n  //     modifiers: [\n  //       {\n  //         name: \"offset\",\n  //         options: {\n  //           offset: [0, 10],\n  //         },\n  //       },\n  //       {\n  //         name: \"arrow\",\n  //         options: {\n  //           element: this.arrow,\n  //         },\n  //       },\n  //       {\n  //         name: \"eventListeners\",\n  //         options: { scroll: false, resize: false },\n  //       },\n  //     ],\n  //   });\n  // };\n\n  // private hide = () => {\n  //   this.toolTip.removeAttribute(\"data-show\");\n  //   this.persistTooltip = false;\n  // };\n\n  // private checkCloseTooltip = () => {\n  //   setTimeout(() => {\n  //     if (!this.mouseOverTool && !this.persistTooltip) {\n  //       this.hide();\n  //     }\n  //   }, 100);\n  // };\n\n  // private mouseEnterTooltip = () => {\n  //   this.mouseOverTool = true;\n  // };\n\n  // private mouseLeaveTooltip = () => {\n  //   this.mouseOverTool = false;\n  //   this.checkCloseTooltip();\n  // };\n\n  // private handleKeyDown = (event: KeyboardEvent) => {\n  //   if (event.key === \"Escape\" && !this.persistTooltip) {\n  //     this.hide();\n  //   }\n  // };\n\n  // private manageEventListeners = (action: \"add\" | \"remove\") => {\n  //   const method =\n  //     action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n  //   this.showEvents.forEach((event) => {\n  //     this.el[method](event, this.show);\n  //     if (this.toolTip !== undefined) {\n  //       this.toolTip[method](event, this.mouseEnterTooltip);\n  //     }\n  //   });\n\n  //   if (!this.persistTooltip) {\n  //     this.instantHideEvents.forEach((event) => {\n  //       this.el[method](event, this.hide);\n  //     });\n  //   }\n\n  //   this.delayedHideEvents.forEach((event) => {\n  //     this.el[method](event, this.checkCloseTooltip);\n  //     if (this.toolTip !== undefined) {\n  //       this.toolTip[method](event, this.mouseLeaveTooltip);\n  //     }\n  //   });\n\n  //   document[method](\"keydown\", this.handleKeyDown);\n  // };\n\n  // this.manageEventListeners(\"add\");\n\n  // onComponentRequiredPropUndefined(\n  //   [{ prop: this.label, propName: \"label\" }],\n  //   \"Tooltip\"\n  // );\n\n  // if (this.target !== undefined) {\n  //   const ariaDescribedBy = document.createElement(\"span\");\n  //   ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n  //   ariaDescribedBy.innerText = this.label;\n  //   ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n  //   Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n  //   this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n  // }\n  // }\n\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show(this.popperInstance) : this.hide(this.popperInstance);\n  }\n\n  render() {\n    const { label } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n        >\n          <ic-typography variant=\"caption\">{label}</ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n            data-popper-arrow\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.e2e.js

@@ -13,6 +13,8 @@ describe("ic-tooltip component", () => {
     await page.setContent(`<ic-tooltip target="test-id" label="test-label" placement="right-end"><button>IC Tooltip Test</button></ic-tooltip>`);
     await page.waitForChanges();
     const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button = await page.find("button");
+    await button.hover();
     expect(await tooltip.getAttribute("data-popper-placement")).toBe("right-end");
   });
   it("should show on focus", async () => {

package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tooltip.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-tooltip/test/basic/ic-tooltip.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-tooltip component\", () => {\n  it(\"should apply the correct label\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\" placement=\"right-end\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> ic-typography\");\n    const text = await tooltip.innerText;\n\n    expect(text).toBe(\"test-label\");\n  });\n\n  it(\"should apply the correct placement\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\" placement=\"right-end\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n\n    expect(await tooltip.getAttribute(\"data-popper-placement\")).toBe(\n      \"right-end\"\n    );\n  });\n\n  it(\"should show on focus\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.focus();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should show on hover\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.hover();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should still show when cursor moves to tooltip\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.hover();\n    await tooltip.hover();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should close when cursor moves away\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button id=\"button-1\">Button 1</button></ic-tooltip><button id=\"button-2\">Button 2</button>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button1 = await page.find(\"#button-1\");\n    const button2 = await page.find(\"#button-2\");\n\n    await button1.hover();\n    await button2.hover();\n    await page.waitForTimeout(200);\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should close when focus moves away\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button id=\"button-1\">Button 1</button></ic-tooltip><button id=\"button-2\">Button 2</button>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button1 = await page.find(\"#button-1\");\n    const button2 = await page.find(\"#button-2\");\n\n    await button1.focus();\n    await button2.focus();\n    await page.waitForTimeout(200);\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should close when escape key pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.focus();\n    await page.keyboard.press(\"Escape\");\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should apply the aria description from hidden span to an element using aria-describedby\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"ic-tooltip-test-button-right-end\" label=\"test-label\" placement=\"right-end\"><button aria-describedby=\"test-button-right-end\">IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltipSpan = await page.find(\"span.ic-tooltip-label\");\n    const text = await tooltipSpan.innerText;\n\n    expect(text).toBe(\"test-label\");\n  });\n\n  it(\"should display the tooltip when the displayTooltip method is called\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\"ic-tooltip\");\n    const tooltipContainer = await page.find(\n      \".ic-tooltip >>> .ic-tooltip-container\"\n    );\n    expect(await tooltipContainer.isVisible()).toBe(false);\n\n    await tooltip.callMethod(\"displayTooltip\", true, true);\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await page.keyboard.press(\"Escape\");\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await tooltip.callMethod(\"displayTooltip\", false);\n    expect(await tooltipContainer.isVisible()).toBe(false);\n  });\n\n  it(\"should still dismiss the tooltip using the keyboard if persistTooltip is false\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\"ic-tooltip\");\n    const tooltipContainer = await page.find(\n      \".ic-tooltip >>> .ic-tooltip-container\"\n    );\n    expect(await tooltipContainer.isVisible()).toBe(false);\n\n    await tooltip.callMethod(\"displayTooltip\", true, false);\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await page.keyboard.press(\"Escape\");\n    expect(await tooltipContainer.isVisible()).toBe(false);\n  });\n});\n"]}
+{"version":3,"file":"ic-tooltip.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-tooltip/test/basic/ic-tooltip.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-tooltip component\", () => {\n  it(\"should apply the correct label\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\" placement=\"right-end\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> ic-typography\");\n    const text = await tooltip.innerText;\n\n    expect(text).toBe(\"test-label\");\n  });\n\n  it(\"should apply the correct placement\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\" placement=\"right-end\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.hover();\n\n    expect(await tooltip.getAttribute(\"data-popper-placement\")).toBe(\n      \"right-end\"\n    );\n  });\n\n  it(\"should show on focus\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.focus();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should show on hover\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.hover();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should still show when cursor moves to tooltip\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.hover();\n    await tooltip.hover();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should close when cursor moves away\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button id=\"button-1\">Button 1</button></ic-tooltip><button id=\"button-2\">Button 2</button>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button1 = await page.find(\"#button-1\");\n    const button2 = await page.find(\"#button-2\");\n\n    await button1.hover();\n    await button2.hover();\n    await page.waitForTimeout(200);\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should close when focus moves away\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button id=\"button-1\">Button 1</button></ic-tooltip><button id=\"button-2\">Button 2</button>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button1 = await page.find(\"#button-1\");\n    const button2 = await page.find(\"#button-2\");\n\n    await button1.focus();\n    await button2.focus();\n    await page.waitForTimeout(200);\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should close when escape key pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.focus();\n    await page.keyboard.press(\"Escape\");\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should apply the aria description from hidden span to an element using aria-describedby\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"ic-tooltip-test-button-right-end\" label=\"test-label\" placement=\"right-end\"><button aria-describedby=\"test-button-right-end\">IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltipSpan = await page.find(\"span.ic-tooltip-label\");\n    const text = await tooltipSpan.innerText;\n\n    expect(text).toBe(\"test-label\");\n  });\n\n  it(\"should display the tooltip when the displayTooltip method is called\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\"ic-tooltip\");\n    const tooltipContainer = await page.find(\n      \".ic-tooltip >>> .ic-tooltip-container\"\n    );\n    expect(await tooltipContainer.isVisible()).toBe(false);\n\n    await tooltip.callMethod(\"displayTooltip\", true, true);\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await page.keyboard.press(\"Escape\");\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await tooltip.callMethod(\"displayTooltip\", false);\n    expect(await tooltipContainer.isVisible()).toBe(false);\n  });\n\n  it(\"should still dismiss the tooltip using the keyboard if persistTooltip is false\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\"ic-tooltip\");\n    const tooltipContainer = await page.find(\n      \".ic-tooltip >>> .ic-tooltip-container\"\n    );\n    expect(await tooltipContainer.isVisible()).toBe(false);\n\n    await tooltip.callMethod(\"displayTooltip\", true, false);\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await page.keyboard.press(\"Escape\");\n    expect(await tooltipContainer.isVisible()).toBe(false);\n  });\n});\n"]}

package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js

@@ -4,7 +4,7 @@ import { Tooltip } from "../../ic-tooltip";
 beforeAll(() => {
   jest.spyOn(console, "error").mockImplementation(jest.fn());
 });
-describe("ic-loading-indicator component", () => {
+describe("ic-tooltip component", () => {
   it("should render", async () => {
     const page = await newSpecPage({
       components: [Tooltip],
@@ -124,5 +124,164 @@ describe("ic-loading-indicator component", () => {
     await page.waitForChanges();
     expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
   });
+  describe("getTooltipTranslate", () => {
+    it("should update for bottom", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update for bottom-start", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="bottom-start"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update for bottom-end", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="bottom-end"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update for top", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="top"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update for top-start", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="top-start"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update for top-end", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="top-end"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update for left", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="left"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update for left-end", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="left-end"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update for right", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="right"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update for right-end", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="right-end"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    it("should update when tooltip is outside of dialog", async () => {
+      const page = await newSpecPage({
+        components: [Tooltip],
+        html: `<ic-tooltip target="test-button" label="tooltip" placement="left"><button id="test-button">Click</button></ic-tooltip>`,
+      });
+      page.rootInstance.dialogOverflow = true;
+      await page.waitForChanges();
+      await page.rootInstance.getTooltipTranslate({
+        left: 0,
+        right: 40,
+        top: 100,
+        bottom: 132,
+      });
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(page.root.placement).toBe("right");
+    });
+  });
 });
 //# sourceMappingURL=ic-tooltip.spec.js.map