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.

COMPONENT_INDEX.md

@@ -2825,7 +2825,8 @@ None.
 ### Props
 
 | Prop name    | Required | Kind             | Reactive | Type                                     | Default value     | Description                                            |
-| :----------- | :------- | :--------------- | :------- | --------------- | ----------------- | ----------- |
+| :----------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | ------------------------------------------------------ |
+| ref          | No       | <code>let</code> | Yes      | <code>null &#124; HTMLSpanElement</code> | <code>null</code> | Obtain a reference to the popover content HTML element |
 | className    | No       | <code>let</code> | No       | --                                       | <code>null</code> | --                                                     |
 | contentProps | No       | <code>let</code> | No       | <code>{}</code>                          | <code>{}</code>   | --                                                     |
 
@@ -4542,21 +4543,19 @@ None.
 ### Props
 
 | Prop name       | Required | Kind             | Reactive | Type                                                                                                                                                                                                                            | Default value                                    | Description                                                                                |
-| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
 | refIcon         | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                                                                                                                                                         | <code>null</code>                                | Obtain a reference to the icon HTML element                                                |
-| refTooltip      | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the tooltip HTML element                                             |
+| refTooltip      | No       | <code>let</code> | Yes      | --                                                                                                                                                                                                                              | <code>null</code>                                | Obtain a reference to the tooltip HTML element                                             |
 | ref             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                                                                                                                                                         | <code>null</code>                                | Obtain a reference to the trigger text HTML element                                        |
 | open            | No       | <code>let</code> | Yes      | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code>                               | Set to `true` to open the tooltip                                                          |
-| align           | No       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon                                      |
+| align           | No       | <code>let</code> | No       | <code>"top" &#124; "top-left" &#124; "top-right" &#124; "bottom" &#124; "bottom-left" &#124; "bottom-right" &#124; "left" &#124; "left-bottom" &#124; "left-top" &#124; "right" &#124; "right-bottom" &#124; "right-top"</code> | <code>"bottom"</code>                            | Set the alignment of the tooltip relative to the icon                                      |
-| direction       | No       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the button                                    |
-| hideIcon        | No       | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to hide the tooltip icon                                                     |
 | icon            | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code>                                                                                                                                                                       | <code>undefined</code>                           | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
 | iconDescription | No       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                                             | <code>""</code>                                  | Specify the ARIA label for the tooltip button                                              |
 | iconName        | No       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                                             | <code>""</code>                                  | Specify the icon name attribute                                                            |
 | tabindex        | No       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                                             | <code>"0"</code>                                 | Set the button tabindex                                                                    |
 | tooltipId       | No       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip                                                                  |
 | triggerId       | No       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button                                                           |
-| triggerText     | No       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Set the tooltip button text                                                                |
+| triggerText     | No       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                                             | <code>""</code>                                  | Set the tooltip button text<br />This is deprecated. Use default slot instead              |
 
 ### Slots
 
@@ -4572,8 +4571,6 @@ None.
 | :--------- | :--------- | :---------------- |
 | open       | dispatched | <code>null</code> |
 | close      | dispatched | <code>null</code> |
-| click      | forwarded  | --                |
-| mousedown  | forwarded  | --                |
 
 ## `TooltipDefinition`
 

docs/src/COMPONENT_API.json

@@ -9006,6 +9006,18 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "ref",
+          "kind": "let",
+          "description": "Obtain a reference to the popover content HTML element",
+          "type": "null | HTMLSpanElement",
+          "value": "null",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": true
         }
       ],
       "moduleExports": [],
@@ -13990,19 +14002,7 @@
           "name": "align",
           "kind": "let",
           "description": "Set the alignment of the tooltip relative to the icon",
-          "type": "\"start\" | \"center\" | \"end\"",
+          "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
-          "value": "\"center\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "direction",
-          "kind": "let",
-          "description": "Set the direction of the tooltip relative to the button",
-          "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
           "value": "\"bottom\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -14022,18 +14022,6 @@
           "constant": false,
           "reactive": true
         },
-        {
-          "name": "hideIcon",
-          "kind": "let",
-          "description": "Set to `true` to hide the tooltip icon",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
         {
           "name": "icon",
           "kind": "let",
@@ -14108,7 +14096,7 @@
         {
           "name": "triggerText",
           "kind": "let",
-          "description": "Set the tooltip button text",
+          "description": "Set the tooltip button text\nThis is deprecated. Use default slot instead",
           "type": "string",
           "value": "\"\"",
           "isFunction": false,
@@ -14133,7 +14121,6 @@
           "name": "refTooltip",
           "kind": "let",
           "description": "Obtain a reference to the tooltip HTML element",
-          "type": "null | HTMLDivElement",
           "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -14172,9 +14159,7 @@
       ],
       "events": [
         { "type": "dispatched", "name": "open", "detail": "null" },
-        { "type": "dispatched", "name": "close", "detail": "null" },
+        { "type": "dispatched", "name": "close", "detail": "null" }
-        { "type": "forwarded", "name": "click", "element": "div" },
-        { "type": "forwarded", "name": "mousedown", "element": "div" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }

docs/src/pages/components/Tooltip.svx

@@ -13,42 +13,31 @@ components: ["Tooltip", "TooltipFooter"]
 By default, the tooltip is triggered by an information icon.
 
 <Tooltip>
-  <p>
   Resources are provisioned based on your account's organization.
-  </p>
 </Tooltip>
 
 ## With trigger text
 
+This is deprecated in Carbon v11.
+
 <Tooltip triggerText="Resource list">
-  <p>
   Resources are provisioned based on your account's organization.
-  </p>
 </Tooltip>
 
 ## Reactive example
 
 <FileSource src="/framed/Tooltip/TooltipReactive" />
 
-## Directions
-
-<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
-<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
-<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
-<Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
-
 ## Alignment
 
-<Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
+<Tooltip triggerText="Left" align="left">Left</Tooltip>
-<Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
+<Tooltip triggerText="Right" align="right">Right</Tooltip>
-<Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
+<Tooltip triggerText="Top" align="top">Top</Tooltip>
 
 ## Interactive
 
 <Tooltip triggerText="Resource list">
-  <p>
   Resources are provisioned based on your account's organization.
-  </p>
   <TooltipFooter selectorPrimaryFocus="#d">
     <Link href="/">Learn more</Link>
     <Button id="d" size="small">Manage</Button>
@@ -58,24 +47,12 @@ By default, the tooltip is triggered by an information icon.
 ## Custom icon (component)
 
 <Tooltip triggerText="Resource list" icon={Catalog}>
-  <p>
   Resources are provisioned based on your account's organization.
-  </p>
 </Tooltip>
 
 ## Custom icon (slot)
 
 <Tooltip triggerText="Resource list">
   <div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
-  <p>
   Resources are provisioned based on your account's organization.
-  </p>
-</Tooltip>
-
-## Hidden icon
-
-<Tooltip hideIcon triggerText="Resource list">
-  <p>
-    Resources are provisioned based on your account's organization.
-  </p>
 </Tooltip>

docs/src/pages/framed/Tooltip/TooltipReactive.svelte

@@ -4,8 +4,8 @@
   let open = true;
 </script>
 
-<Tooltip bind:open triggerText="Resource list" align="start">
+<Tooltip bind:open align="bottom-left">
-  <p>Resources are provisioned based on your account's organization.</p>
+  Resources are provisioned based on your account's organization.
 </Tooltip>
 
 <div style="margin-top: var(--bx-spacing-12);">

src/Tooltip/Tooltip.svelte

@@ -6,15 +6,9 @@
 
   /**
    * Set the alignment of the tooltip relative to the icon
-   * @type {"start" | "center" | "end"}
+   * @type {"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"}
    */
-  export let align = "center";
+  export let align = "bottom";
-
-  /**
-   * Set the direction of the tooltip relative to the button
-   * @type {"top" | "right" | "bottom" | "left"}
-   */
-  export let direction = "bottom";
 
   /**
    * Set to `true` to open the tooltip
@@ -22,12 +16,6 @@
    */
   export let open = false;
 
-  /**
-   * Set to `true` to hide the tooltip icon
-   * @type {boolean}
-   */
-  export let hideIcon = false;
-
   /**
    * Specify the icon to render for the tooltip button.
    * Default to `<Information />`
@@ -56,7 +44,10 @@
    */
   export let triggerId = "ccs-" + Math.random().toString(36);
 
-  /** Set the tooltip button text */
+  /**
+   * Set the tooltip button text
+   * This is deprecated. Use default slot instead
+   */
   export let triggerText = "";
 
   /** Obtain a reference to the trigger text HTML element */
@@ -71,6 +62,8 @@
   import { createEventDispatcher, afterUpdate, setContext } from "svelte";
   import { writable } from "svelte/store";
   import Information from "../icons/Information.svelte";
+  import Popover from "../Popover/Popover.svelte";
+  import PopoverContent from "../Popover/PopoverContent.svelte";
 
   const dispatch = createEventDispatcher();
   const tooltipOpen = writable(open);
@@ -121,44 +114,6 @@
         iconWidth = icon.width;
         iconHeight = icon.height;
       }
-
-      let offsetX = 0;
-      let offsetY = 0;
-
-      switch (direction) {
-        case "bottom":
-          if (hideIcon) {
-            offsetX = -1 * (tooltip.width / 2 - button.width / 2);
-          } else {
-            offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2);
-          }
-          offsetY = iconHeight / 2;
-          break;
-        case "right":
-          offsetX = button.width + 6;
-          offsetY = -1 * (tooltip.height / 2 + iconWidth / 2 - 3);
-          break;
-        case "left":
-          if (hideIcon) {
-            offsetX = -1 * (tooltip.width + 6 + 1);
-          } else {
-            offsetX = -1 * (tooltip.width - button.width + iconWidth + 8);
-          }
-          offsetY = -1 * (tooltip.height / 2 + button.height) - 2;
-          break;
-        case "top":
-          if (hideIcon) {
-            offsetX = -1 * (tooltip.width / 2 - button.width / 2);
-          } else {
-            offsetX =
-              -1 * (tooltip.width / 2 - button.width + iconWidth / 2 + 1);
-          }
-          offsetY = -1 * (tooltip.height + button.height + iconWidth / 2 - 1);
-          break;
-      }
-
-      refTooltip.style.left = offsetX + "px";
-      refTooltip.style.marginTop = offsetY + "px";
     }
   });
 
@@ -167,14 +122,11 @@
   $: buttonProps = {
     role: "button",
     "aria-haspopup": "true",
-    id: hideIcon ? triggerId : undefined,
-    class: hideIcon ? "bx--tooltip__label" : "bx--tooltip__trigger",
     "aria-expanded": open,
     "aria-describedby": open ? tooltipId : undefined,
     "aria-labelledby": triggerText ? triggerId : undefined,
     "aria-label": triggerText ? undefined : iconDescription,
     tabindex,
-    style: hideIcon ? $$restProps.style : undefined,
   };
 </script>
 
@@ -204,9 +156,10 @@
   style:z-index="{open ? 1 : undefined}"
   {...$$restProps}
 >
-  {#if !hideIcon}
+  <div bind:this="{ref}" id="{triggerId}">
-    <div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
+    <!-- todo: remove this. it’s only kept for legacy. -->
     <slot name="triggerText">{triggerText}</slot>
+    <Popover bind:open highContrast align="{align}">
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         bind:this="{refIcon}"
@@ -220,50 +173,12 @@
           <svelte:component this="{icon}" name="{iconName}" />
         </slot>
       </div>
-    </div>
+      <PopoverContent
-  {:else}
+        className="{'bx--tooltip-content'}"
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+        bind:ref="{refTooltip}"
-    <div
-      bind:this="{ref}"
-      {...buttonProps}
-      aria-describedby="{tooltipId}"
-      on:mousedown="{onMousedown}"
-      on:focus="{onFocus}"
-      on:blur="{onBlur}"
-      on:keydown="{onKeydown}"
-    >
-      <slot name="triggerText">{triggerText}</slot>
-    </div>
-  {/if}
-  {#if open}
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-      bind:this="{refTooltip}"
-      id="{tooltipId}"
-      data-floating-menu-direction="{direction}"
-      class:bx--tooltip="{true}"
-      class:bx--tooltip--shown="{open}"
-      class:bx--tooltip--top="{direction === 'top'}"
-      class:bx--tooltip--right="{direction === 'right'}"
-      class:bx--tooltip--bottom="{direction === 'bottom'}"
-      class:bx--tooltip--left="{direction === 'left'}"
-      class:bx--tooltip--align-center="{align === 'center'}"
-      class:bx--tooltip--align-start="{align === 'start'}"
-      class:bx--tooltip--align-end="{align === 'end'}"
-      on:keydown="{onKeydown}"
-    >
-      <span class:bx--tooltip__caret="{true}"></span>
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-      <div
-        on:click|stopPropagation
-        on:mousedown|stopPropagation
-        class:bx--tooltip__content="{true}"
-        tabindex="-1"
-        role="dialog"
       >
         <slot />
+      </PopoverContent>
+    </Popover>
   </div>
 </div>
-  {/if}
-</div>

tests/Tooltip.test.svelte

@@ -6,31 +6,23 @@
 </script>
 
 <Tooltip bind:open on:open on:close>
-  <p>Resources are provisioned based on your account's organization.</p>
+  Resources are provisioned based on your account's organization.
 </Tooltip>
 
-<Tooltip triggerText="Resource list">
+<Tooltip>
-  <p>Resources are provisioned based on your account's organization.</p>
+  Resources are provisioned based on your account's organization.
 </Tooltip>
 
-<Tooltip triggerText="Top" direction="top">
+<Tooltip triggerText="Top" align="top">Top</Tooltip>
-  <p>Top</p>
-</Tooltip>
 
-<Tooltip triggerText="Right" direction="right">
+<Tooltip triggerText="Right" align="right">Right</Tooltip>
-  <p>Right</p>
-</Tooltip>
 
-<Tooltip triggerText="Bottom" direction="bottom">
+<Tooltip triggerText="Bottom" align="bottom">Bottom</Tooltip>
-  <p>Bottom</p>
-</Tooltip>
 
-<Tooltip triggerText="Left" direction="left">
+<Tooltip triggerText="Left" align="left">Left</Tooltip>
-  <p>Left</p>
-</Tooltip>
 
-<Tooltip triggerText="Resource list">
+<Tooltip>
-  <p>Resources are provisioned based on your account's organization.</p>
+  Resources are provisioned based on your account's organization.
   <div class="bx--tooltip__footer">
     <Link href="/">Learn more</Link>
     <Button size="sm">Manage</Button>
@@ -41,14 +33,14 @@
 
 <Button size="sm">Manage</Button>
 
-<Tooltip triggerText="Resource list" icon="{Catalog}">
+<Tooltip icon="{Catalog}">
-  <p>Resources are provisioned based on your account's organization.</p>
+  Resources are provisioned based on your account's organization.
 </Tooltip>
 
-<Tooltip triggerText="Resource list">
+<Tooltip>
   <div
     slot="icon"
     style="width: 1rem; height: 1rem; outline: 1px solid red;"
   ></div>
-  <p>Resources are provisioned based on your account's organization.</p>
+  Resources are provisioned based on your account's organization.
 </Tooltip>

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> },
-    open: CustomEvent<null>;
-    close: CustomEvent<null>;
-    click: WindowEventMap["click"];
-    mousedown: WindowEventMap["mousedown"];
-  },
   { default: {}; icon: {}; triggerText: {} }
 > {}