mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
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.
This commit is contained in:
parent
3350a412da
commit
e00c956a66
8 changed files with 100 additions and 232 deletions
36
types/Tooltip/Tooltip.svelte.d.ts
vendored
36
types/Tooltip/Tooltip.svelte.d.ts
vendored
|
@ -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: {} }
|
||||
> {}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue