@aquera/nile-elements 0.1.32-beta-1.3 → 0.1.32-beta-1.4

package/dist/src/nile-tooltip/nile-tooltip-utils.js

@@ -0,0 +1,151 @@
+export function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+}
+export function getValidTooltipPosition(triggerRect, tooltipRect, originalPlacement, distance, skidding, caretSize, viewportWidth, viewportHeight) {
+    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    const getCandidatePosition = (placement) => {
+        let top = 0;
+        let left = 0;
+        switch (placement) {
+            case 'top':
+                top = triggerRect.top - tooltipRect.height - distance;
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+                break;
+            case 'top-start':
+                top = triggerRect.top - tooltipRect.height - distance;
+                left = triggerCenterX - caretSize + skidding;
+                break;
+            case 'top-end':
+                top = triggerRect.top - tooltipRect.height - distance;
+                left = triggerCenterX - tooltipRect.width + caretSize + 10 + skidding;
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + distance;
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+                break;
+            case 'bottom-start':
+                top = triggerRect.bottom + distance;
+                left = triggerCenterX - caretSize - 10 + skidding;
+                break;
+            case 'bottom-end':
+                top = triggerRect.bottom + distance;
+                left = triggerCenterX - (tooltipRect.width - caretSize) + 10 + skidding;
+                break;
+            case 'left':
+                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
+                left = triggerRect.left - tooltipRect.width - distance;
+                break;
+            case 'left-start':
+                top = triggerRect.top + skidding;
+                left = triggerRect.left - tooltipRect.width - distance;
+                break;
+            case 'left-end':
+                top = triggerRect.bottom - tooltipRect.height + skidding;
+                left = triggerRect.left - tooltipRect.width - distance;
+                break;
+            case 'right':
+                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
+                left = triggerRect.right + distance;
+                break;
+            case 'right-start':
+                top = triggerRect.top + skidding;
+                left = triggerRect.right + distance;
+                break;
+            case 'right-end':
+                top = triggerRect.bottom - tooltipRect.height + skidding;
+                left = triggerRect.right + distance;
+                break;
+            default:
+                top = triggerRect.top - tooltipRect.height - distance;
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
+        }
+        return { top, left };
+    };
+    const candidateFits = (top, left) => top >= 0 &&
+        left >= 0 &&
+        top + tooltipRect.height <= viewportHeight &&
+        left + tooltipRect.width <= viewportWidth;
+    let placement = originalPlacement;
+    let candidate = getCandidatePosition(placement);
+    if (!candidateFits(candidate.top, candidate.left)) {
+        if (!placement.startsWith('bottom')) {
+            placement = 'bottom';
+            candidate = getCandidatePosition(placement);
+        }
+    }
+    if (candidate.left < 0) {
+        candidate.left = 5;
+    }
+    else if (candidate.left + tooltipRect.width > viewportWidth) {
+        candidate.left = viewportWidth - tooltipRect.width - 5;
+    }
+    if (candidate.top < 0) {
+        candidate.top = 5;
+    }
+    else if (candidate.top + tooltipRect.height > viewportHeight) {
+        candidate.top = viewportHeight - tooltipRect.height - 5;
+    }
+    return { ...candidate, placement };
+}
+export function getCaretPosition({ placement, tooltipRect, triggerRect, caretSize, left, top }) {
+    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+    const [primaryPlacement, secondaryPlacement] = placement.split('-');
+    let caretLeft = 0;
+    let caretTop = 0;
+    switch (primaryPlacement) {
+        case 'top':
+            caretTop = tooltipRect.height - caretSize;
+            caretLeft = triggerCenterX - left - caretSize;
+            if (placement === 'top-end') {
+                caretLeft = triggerCenterX - left - caretSize;
+            }
+            else if (secondaryPlacement === 'start') {
+                caretLeft = triggerCenterX - left - caretSize;
+            }
+            else if (secondaryPlacement === 'end') {
+                caretLeft = tooltipRect.width - 2 * caretSize + 8;
+            }
+            caretLeft = Math.max(caretSize, Math.min(caretLeft, tooltipRect.width - 2 * caretSize));
+            break;
+        case 'bottom':
+            caretTop = -caretSize;
+            caretLeft = triggerCenterX - left - caretSize;
+            break;
+        case 'left':
+            caretLeft = tooltipRect.width - caretSize;
+            if (secondaryPlacement === 'start') {
+                caretTop = triggerRect.height / 2 - caretSize;
+            }
+            else if (secondaryPlacement === 'end') {
+                caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;
+            }
+            else {
+                caretTop = triggerCenterY - top - caretSize;
+            }
+            caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
+            break;
+        case 'right':
+            caretLeft = -caretSize;
+            if (secondaryPlacement === 'start') {
+                caretTop = triggerRect.height / 2 - caretSize;
+            }
+            else if (secondaryPlacement === 'end') {
+                caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;
+            }
+            else {
+                caretTop = triggerCenterY - top - caretSize;
+            }
+            caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
+            break;
+        default:
+            caretLeft = tooltipRect.width / 2 - caretSize;
+            caretTop = tooltipRect.height / 2 - caretSize;
+    }
+    return { caretLeft, caretTop };
+}
+//# sourceMappingURL=nile-tooltip-utils.js.map

package/dist/src/nile-tooltip/nile-tooltip-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tooltip-utils.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip-utils.ts"],"names":[],"mappings":"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","sourcesContent":["export function isInViewport(element: HTMLElement): boolean {\n  const rect = element.getBoundingClientRect();\n  return (\n    rect.top >= 0 &&\n    rect.left >= 0 &&\n    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n    rect.right <= (window.innerWidth || document.documentElement.clientWidth)\n  );\n}\n\n\nexport function getValidTooltipPosition(\n  triggerRect: DOMRect,\n  tooltipRect: DOMRect,\n  originalPlacement: string,\n  distance: number,\n  skidding: number,\n  caretSize: number,\n  viewportWidth: number,\n  viewportHeight: number\n): { top: number; left: number; placement: string } {\n  const triggerCenterX = triggerRect.left + triggerRect.width / 2;\n\n  const getCandidatePosition = (placement: string) => {\n    let top = 0;\n    let left = 0;\n\n    switch (placement) {\n      case 'top':\n        top = triggerRect.top - tooltipRect.height - distance;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;\n        break;\n      case 'top-start':\n        top = triggerRect.top - tooltipRect.height - distance;\n        left = triggerCenterX - caretSize + skidding;\n        break;\n      case 'top-end':\n        top = triggerRect.top - tooltipRect.height - distance;\n        left = triggerCenterX - tooltipRect.width + caretSize + 10 + skidding;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + distance;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;\n        break;\n      case 'bottom-start':\n        top = triggerRect.bottom + distance;\n        left = triggerCenterX - caretSize - 10 + skidding;\n        break;\n      case 'bottom-end':\n        top = triggerRect.bottom + distance;\n        left = triggerCenterX - (tooltipRect.width - caretSize) + 10 + skidding;\n        break;\n      case 'left':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;\n        left = triggerRect.left - tooltipRect.width - distance;\n        break;\n      case 'left-start':\n        top = triggerRect.top + skidding;\n        left = triggerRect.left - tooltipRect.width - distance;\n        break;\n      case 'left-end':\n        top = triggerRect.bottom - tooltipRect.height + skidding;\n        left = triggerRect.left - tooltipRect.width - distance;\n        break;\n      case 'right':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;\n        left = triggerRect.right + distance;\n        break;\n      case 'right-start':\n        top = triggerRect.top + skidding;\n        left = triggerRect.right + distance;\n        break;\n      case 'right-end':\n        top = triggerRect.bottom - tooltipRect.height + skidding;\n        left = triggerRect.right + distance;\n        break;\n      default:\n        top = triggerRect.top - tooltipRect.height - distance;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;\n    }\n\n    return { top, left };\n  };\n\n  const candidateFits = (top: number, left: number) =>\n    top >= 0 &&\n    left >= 0 &&\n    top + tooltipRect.height <= viewportHeight &&\n    left + tooltipRect.width <= viewportWidth;\n\n  let placement = originalPlacement;\n  let candidate = getCandidatePosition(placement);\n\n  if (!candidateFits(candidate.top, candidate.left)) {\n    if (!placement.startsWith('bottom')) {\n      placement = 'bottom';\n      candidate = getCandidatePosition(placement);\n    }\n  }\n\n  if (candidate.left < 0) {\n    candidate.left = 5;\n  } else if (candidate.left + tooltipRect.width > viewportWidth) {\n    candidate.left = viewportWidth - tooltipRect.width - 5;\n  }\n\n  if (candidate.top < 0) {\n    candidate.top = 5;\n  } else if (candidate.top + tooltipRect.height > viewportHeight) {\n    candidate.top = viewportHeight - tooltipRect.height - 5;\n  }\n\n  return { ...candidate, placement };\n}\n\nexport interface CaretPositionInput {\n  placement: string;\n  tooltipRect: DOMRect;\n  triggerRect: DOMRect;\n  caretSize: number;\n  left: number;\n  top: number;\n}\n\nexport function getCaretPosition({\n  placement,\n  tooltipRect,\n  triggerRect,\n  caretSize,\n  left,\n  top\n}: CaretPositionInput): { caretLeft: number; caretTop: number } {\n  const triggerCenterX = triggerRect.left + triggerRect.width / 2;\n  const triggerCenterY = triggerRect.top + triggerRect.height / 2;\n\n  const [primaryPlacement, secondaryPlacement] = placement.split('-');\n\n  let caretLeft = 0;\n  let caretTop = 0;\n\n  switch (primaryPlacement) {\n      case 'top':\n          caretTop = tooltipRect.height - caretSize;\n          caretLeft = triggerCenterX - left -  caretSize;\n          if (placement === 'top-end') {\n            caretLeft = triggerCenterX - left - caretSize;\n          } else if (secondaryPlacement === 'start') {\n            caretLeft = triggerCenterX - left -  caretSize;\n          } else if (secondaryPlacement === 'end') {\n            caretLeft = tooltipRect.width - 2 *  caretSize + 8;\n          }\n          caretLeft = Math.max(caretSize, Math.min(caretLeft, tooltipRect.width - 2 * caretSize));\n          break;\n\n    case 'bottom':\n      caretTop = -caretSize;\n      caretLeft = triggerCenterX - left - caretSize;\n      break;\n\n    case 'left':\n      caretLeft = tooltipRect.width - caretSize;\n      if (secondaryPlacement === 'start') {\n        caretTop = triggerRect.height / 2 - caretSize;\n      } else if (secondaryPlacement === 'end') {\n        caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;\n      } else {\n        caretTop = triggerCenterY - top - caretSize;\n      }\n      caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));\n      break;\n\n    case 'right':\n      caretLeft = -caretSize;\n      if (secondaryPlacement === 'start') {\n        caretTop = triggerRect.height / 2 - caretSize;\n      } else if (secondaryPlacement === 'end') {\n        caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;\n      } else {\n        caretTop = triggerCenterY - top - caretSize;\n      }\n      caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));\n      break;\n\n    default:\n      caretLeft = tooltipRect.width / 2 - caretSize;\n      caretTop = tooltipRect.height / 2 - caretSize;\n  }\n\n  return { caretLeft, caretTop };\n}"]}

package/dist/src/nile-tooltip/nile-tooltip.css.js

@@ -9,60 +9,63 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css `
-  :host {
-    --max-width: 20rem;
-    --hide-delay: 0ms;
-    --show-delay: 150ms;
 
-    display: contents;
-  }
 
-  .tooltip {
-    --arrow-size: 6px;
-    --arrow-color: var(--nile-tooltip-color-background);
-  }
+:host {
+      position: relative;
+      display: inline-block;
+    }
+    .tooltip {
+      position: fixed;
+      z-index: 1000;
+      background-color: var(--nile-tooltip-color-background, #333);
+      color: var(--nile-colors-white-base, #fff);
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: var(--nile-tooltip-font-size-sm, 14px);
+      line-height: var(--nile-tooltip-line-height-sm, 1.5);
+      opacity: 0;
+      transition: opacity 0.2s, transform 0.2s;
+      pointer-events: none;
+      white-space: normal;
+      visibility: hidden;
+      overflow: visible;
+ 
+    }
+    :host([open]) .tooltip {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+    .tooltip__body--large {
+      font-size: var(--nile-tooltip-font-size-lg, 16px);
+      line-height: var(--nile-tooltip-line-height-lg, 1.75);
+    }
+    .tooltip-content {
+      overflow: auto;
+      max-width: 252px;
+      max-height: 116px;
+    }
+    .tooltip-caret {
+      position: absolute;
+      width: calc(2 * var(--caret-size, 6px));
+      height: calc(2 * var(--caret-size, 6px));
+      background-color: inherit;
+      transform: rotate(45deg);
+      z-index: -1;
+    }
+    .trigger-container {
+      display: inline-block;
+    }
+ 
 
-  .tooltip::part(popup) {
-    pointer-events: none;
-    z-index: 1000;
-  }
 
-  .tooltip[placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
 
-  .tooltip[placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
 
-  .tooltip[placement^='left']::part(popup) {
-    transform-origin: right;
-  }
 
-  .tooltip[placement^='right']::part(popup) {
-    transform-origin: left;
-  }
 
-  .tooltip__body {
-    display: block;
-    width: max-content;
-    max-width: var(--max-width);
-    border-radius: 4px;
-    background-color: var(--nile-tooltip-color-background);
-    font-size: var(--nile-tooltip-font-size-sm);
-    font-weight: var(--nile-tooltip-font-weight-sm);
-    line-height: var(--nile-tooltip-line-height-sm);
-    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
-    color: var(--nile-colors-white-base);
-    pointer-events: none;
-    word-break: break-word;
-  }
 
-  .tooltip__body--large {
-    font-size: var(--nile-tooltip-font-size-lg);
-    line-height: var(--nile-tooltip-line-height-lg);
-    font-weight: var(--nile-tooltip-font-weight-lg);
-  }
+ 
 `;
 export default [styles];
 //# sourceMappingURL=nile-tooltip.css.js.map

package/dist/src/nile-tooltip/nile-tooltip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: 6px;\n    --arrow-color: var(--nile-tooltip-color-background);\n  }\n\n  .tooltip::part(popup) {\n    pointer-events: none;\n    z-index: 1000;\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: 4px;\n    background-color: var(--nile-tooltip-color-background);\n    font-size: var(--nile-tooltip-font-size-sm);\n    font-weight: var(--nile-tooltip-font-weight-sm);\n    line-height: var(--nile-tooltip-line-height-sm);\n    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);\n    color: var(--nile-colors-white-base);\n    pointer-events: none;\n    word-break: break-word;\n  }\n\n  .tooltip__body--large {\n    font-size: var(--nile-tooltip-font-size-lg);\n    line-height: var(--nile-tooltip-line-height-lg);\n    font-weight: var(--nile-tooltip-font-weight-lg);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n\n\n:host {\n      position: relative;\n      display: inline-block;\n    }\n    .tooltip {\n      position: fixed;\n      z-index: 1000;\n      background-color: var(--nile-tooltip-color-background, #333);\n      color: var(--nile-colors-white-base, #fff);\n      padding: 6px 10px;\n      border-radius: 4px;\n      font-size: var(--nile-tooltip-font-size-sm, 14px);\n      line-height: var(--nile-tooltip-line-height-sm, 1.5);\n      opacity: 0;\n      transition: opacity 0.2s, transform 0.2s;\n      pointer-events: none;\n      white-space: normal;\n      visibility: hidden;\n      overflow: visible;\n \n    }\n    :host([open]) .tooltip {\n      opacity: 1;\n      visibility: visible;\n      pointer-events: auto;\n    }\n    .tooltip__body--large {\n      font-size: var(--nile-tooltip-font-size-lg, 16px);\n      line-height: var(--nile-tooltip-line-height-lg, 1.75);\n    }\n    .tooltip-content {\n      overflow: auto;\n      max-width: 252px;\n      max-height: 116px;\n    }\n    .tooltip-caret {\n      position: absolute;\n      width: calc(2 * var(--caret-size, 6px));\n      height: calc(2 * var(--caret-size, 6px));\n      background-color: inherit;\n      transform: rotate(45deg);\n      z-index: -1;\n    }\n    .trigger-container {\n      display: inline-block;\n    }\n \n\n\n\n\n\n\n\n \n`;\n\nexport default [styles];"]}

package/dist/src/nile-tooltip/nile-tooltip.d.ts

@@ -4,10 +4,8 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { CSSResultArray, TemplateResult } from 'lit';
-import '../nile-popup/nile-popup';
+import { CSSResultArray } from 'lit';
 import NileElement from '../internal/nile-element';
-import type NilePopup from '../nile-popup/nile-popup';
 /**
  * Nile icon component.
  *
@@ -15,64 +13,45 @@ import type NilePopup from '../nile-popup/nile-popup';
  *
  */
 export declare class NileTooltip extends NileElement {
-    /**
-     * The styles for Tooltip
-     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-     */
-    static get styles(): CSSResultArray;
-    private hoverTimeout;
-    defaultSlot: HTMLSlotElement;
-    body: HTMLElement;
-    popup: NilePopup;
-    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
     content: string;
-    /** Size Property to decide the tool tip size */
     size: 'small' | 'large';
-    /**
-     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-     * inside of the viewport.
-     */
     placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-    /** Disables the tooltip so it won't show when triggered. */
     disabled: boolean;
-    /** The distance in pixels from which to offset the tooltip away from its target. */
-    distance: number;
-    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
     open: boolean;
-    /** The distance in pixels from which to offset the tooltip along its target. */
-    skidding: number;
     /**
      * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
      * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
      * programmatically.
      */
     trigger: string;
-    /**
-     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-     * scenarios.
-     */
+    distance: number;
+    private readonly SHIFT_OFFSET;
+    /** The distance in pixels from which to offset the tooltip along its target. */
+    skidding: number;
     hoist: boolean;
+    tooltip: HTMLElement;
+    triggerContainer: HTMLElement;
+    caret: HTMLElement;
+    tooltipSlot: HTMLSlotElement;
+    private hasTooltipSlot;
+    private hoverTimeout;
+    private caretSize;
+    private originalPlacement;
+    static get styles(): CSSResultArray;
     connectedCallback(): void;
-    firstUpdated(): void;
+    updated(changedProps: Map<string, unknown>): void;
     disconnectedCallback(): void;
-    private handleBlur;
-    private handleClick;
-    private handleFocus;
-    private handleKeyDown;
+    private handleTooltipSlotChange;
+    private updateTooltipPosition;
+    private showTooltip;
+    private hideTooltip;
     private handleMouseOver;
     private handleMouseOut;
-    private hasTrigger;
-    handleOpenChange(): Promise<void>;
-    handleOptionsChange(): Promise<void>;
-    handleDisabledChange(): void;
-    /** Shows the tooltip. */
-    show(): Promise<void>;
-    /** Hides the tooltip */
-    hide(): Promise<void>;
-    render(): TemplateResult<1>;
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    render(): import("lit-html").TemplateResult<1>;
 }
-export default NileTooltip;
 declare global {
     interface HTMLElementTagNameMap {
         'nile-tooltip': NileTooltip;