feat(v11): Tooltip

Refactor `Tooltip` to use `Popover` component internally.

**Breaking changes**

- `direction` is replaced by additional `align` options.
- `hideIcon` property is removed.

**Limitations**

- The reference implementaiton uses the trigger content instead of the tooltip content as primary slot. This is not considered in this refactoring since it would be too big of a change.
- Instead of `TooltipFooter` a new `Toggletip` component would be required which is not included in this patch.

types/Popover/PopoverContent.svelte.d.ts

@@ -14,6 +14,12 @@ export interface PopoverContentProps extends RestProps {
    */
   contentProps?: {};
 
+  /**
+   * Obtain a reference to the popover content HTML element
+   * @default null
+   */
+  ref?: null | HTMLSpanElement;
+
   [key: `data-${string}`]: any;
 }
 

types/Tooltip/Tooltip.svelte.d.ts

@@ -6,15 +6,21 @@ type RestProps = SvelteHTMLElements["div"];
 export interface TooltipProps extends RestProps {
   /**
    * Set the alignment of the tooltip relative to the icon
-   * @default "center"
-   */
-  align?: "start" | "center" | "end";
-
-  /**
-   * Set the direction of the tooltip relative to the button
    * @default "bottom"
    */
-  direction?: "top" | "right" | "bottom" | "left";
+  align?:
+    | "top"
+    | "top-left"
+    | "top-right"
+    | "bottom"
+    | "bottom-left"
+    | "bottom-right"
+    | "left"
+    | "left-bottom"
+    | "left-top"
+    | "right"
+    | "right-bottom"
+    | "right-top";
 
   /**
    * Set to `true` to open the tooltip
@@ -22,12 +28,6 @@ export interface TooltipProps extends RestProps {
    */
   open?: boolean;
 
-  /**
-   * Set to `true` to hide the tooltip icon
-   * @default false
-   */
-  hideIcon?: boolean;
-
   /**
    * Specify the icon to render for the tooltip button.
    * Default to `<Information />`
@@ -67,6 +67,7 @@ export interface TooltipProps extends RestProps {
 
   /**
    * Set the tooltip button text
+   * This is deprecated. Use default slot instead
    * @default ""
    */
   triggerText?: string;
@@ -81,7 +82,7 @@ export interface TooltipProps extends RestProps {
    * Obtain a reference to the tooltip HTML element
    * @default null
    */
-  refTooltip?: null | HTMLDivElement;
+  refTooltip?: undefined;
 
   /**
    * Obtain a reference to the icon HTML element
@@ -94,11 +95,6 @@ export interface TooltipProps extends RestProps {
 
 export default class Tooltip extends SvelteComponentTyped<
   TooltipProps,
-  {
-    open: CustomEvent<null>;
-    close: CustomEvent<null>;
-    click: WindowEventMap["click"];
-    mousedown: WindowEventMap["mousedown"];
-  },
+  { open: CustomEvent<null>; close: CustomEvent<null> },
   { default: {}; icon: {}; triggerText: {} }
 > {}