diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index dbdb568e..27d32847 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2824,10 +2824,11 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :----------- | :------- | :--------------- | :------- | --------------- | ----------------- | ----------- | -| className | No | let | No | -- | null | -- | -| contentProps | No | let | No | {} | {} | -- | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | ------------------------------------------------------ | +| ref | No | let | Yes | null | HTMLSpanElement | null | Obtain a reference to the popover content HTML element | +| className | No | let | No | -- | null | -- | +| contentProps | No | let | No | {} | {} | -- | ### Slots @@ -4541,22 +4542,20 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | -| refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | -| refTooltip | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | -| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | -| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip | -| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | -| hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` | -| iconDescription | No | let | No | string | "" | Specify the ARIA label for the tooltip button | -| iconName | No | let | No | string | "" | Specify the icon name attribute | -| tabindex | No | let | No | string | "0" | Set the button tabindex | -| tooltipId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | -| triggerId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | -| triggerText | No | let | No | string | "" | Set the tooltip button text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | +| refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | +| refTooltip | No | let | Yes | -- | null | Obtain a reference to the tooltip HTML element | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip | +| align | No | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "bottom" | Set the alignment of the tooltip relative to the icon | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` | +| iconDescription | No | let | No | string | "" | Specify the ARIA label for the tooltip button | +| iconName | No | let | No | string | "" | Specify the icon name attribute | +| tabindex | No | let | No | string | "0" | Set the button tabindex | +| tooltipId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | +| triggerId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | +| triggerText | No | let | No | string | "" | Set the tooltip button text
This is deprecated. Use default slot instead | ### Slots @@ -4572,8 +4571,6 @@ None. | :--------- | :--------- | :---------------- | | open | dispatched | null | | close | dispatched | null | -| click | forwarded | -- | -| mousedown | forwarded | -- | ## `TooltipDefinition` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 222ed167..83a68ca1 100644 --- a/docs/src/COMPONENT_API.json +++ b/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\"", - "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\"", + "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", "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": "forwarded", "name": "click", "element": "div" }, - { "type": "forwarded", "name": "mousedown", "element": "div" } + { "type": "dispatched", "name": "close", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } diff --git a/docs/src/pages/components/Tooltip.svx b/docs/src/pages/components/Tooltip.svx index 7b34025e..cd877b9d 100644 --- a/docs/src/pages/components/Tooltip.svx +++ b/docs/src/pages/components/Tooltip.svx @@ -13,69 +13,46 @@ components: ["Tooltip", "TooltipFooter"] By default, the tooltip is triggered by an information icon. -

- Resources are provisioned based on your account's organization. -

+ Resources are provisioned based on your account's organization. ## With trigger text +This is deprecated in Carbon v11. + -

- Resources are provisioned based on your account's organization. -

+ Resources are provisioned based on your account's organization. ## Reactive example -## Directions - -

Top

 -

Right

 -

Bottom

 -

Left

 - ## Alignment -

Start

 -

End

 -

Center

 +Left +Right +Top ## Interactive -

- Resources are provisioned based on your account's organization. -

+ Resources are provisioned based on your account's organization. Learn more - + ## Custom icon (component) -

- Resources are provisioned based on your account's organization. -

+ Resources are provisioned based on your account's organization. ## Custom icon (slot)
-

- Resources are provisioned based on your account's organization. -

+ Resources are provisioned based on your account's organization. - -## Hidden icon - - -

- Resources are provisioned based on your account's organization. -

- \ No newline at end of file diff --git a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte index b14e9911..d7e586d9 100644 --- a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte +++ b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte @@ -4,8 +4,8 @@ let open = true; - -

Resources are provisioned based on your account's organization.

+ + Resources are provisioned based on your account's organization.
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte index cc7c8d20..5ec95be9 100644 --- a/src/Tooltip/Tooltip.svelte +++ b/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"; - - /** - * Set the direction of the tooltip relative to the button - * @type {"top" | "right" | "bottom" | "left"} - */ - export let direction = "bottom"; + export let align = "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 `` @@ -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, }; @@ -204,9 +156,10 @@ style:z-index="{open ? 1 : undefined}" {...$$restProps} > - {#if !hideIcon} -
- {triggerText} +
+ + {triggerText} +
-
- {:else} - -
- {triggerText} -
- {/if} - {#if open} - -
- - - -
-
-
- {/if} + + +
diff --git a/tests/Tooltip.test.svelte b/tests/Tooltip.test.svelte index cbdc5821..ccff925d 100644 --- a/tests/Tooltip.test.svelte +++ b/tests/Tooltip.test.svelte @@ -6,31 +6,23 @@ -

Resources are provisioned based on your account's organization.

+ Resources are provisioned based on your account's organization. - -

Resources are provisioned based on your account's organization.

+ + Resources are provisioned based on your account's organization. - -

Top

- +Top - -

Right

- +Right - -

Bottom

- +Bottom - -

Left

- +Left - -

Resources are provisioned based on your account's organization.

+ + Resources are provisioned based on your account's organization.
Learn more @@ -41,14 +33,14 @@ - -

Resources are provisioned based on your account's organization.

+ + Resources are provisioned based on your account's organization. - +
-

Resources are provisioned based on your account's organization.

+ Resources are provisioned based on your account's organization. diff --git a/types/Popover/PopoverContent.svelte.d.ts b/types/Popover/PopoverContent.svelte.d.ts index 614d57a2..e8595b0e 100644 --- a/types/Popover/PopoverContent.svelte.d.ts +++ b/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; } diff --git a/types/Tooltip/Tooltip.svelte.d.ts b/types/Tooltip/Tooltip.svelte.d.ts index 593ca8c4..c99f4bbd 100644 --- a/types/Tooltip/Tooltip.svelte.d.ts +++ b/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 `` @@ -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; - close: CustomEvent; - click: WindowEventMap["click"]; - mousedown: WindowEventMap["mousedown"]; - }, + { open: CustomEvent; close: CustomEvent }, { default: {}; icon: {}; triggerText: {} } > {}