carbon-components-svelte
Version:
Svelte implementation of the Carbon Design System
86 lines (71 loc) • 2 kB
TypeScript
import { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type $RestProps = SvelteHTMLElements["span"];
type $Props<Icon = any> = {
/**
* Set the alignment of the content relative to the button.
* @default "center"
*/
align?: "start" | "center" | "end";
/**
* Set the direction of the content relative to the button.
* @default "bottom"
*/
direction?: "top" | "right" | "bottom" | "left";
/**
* Set to `true` to open the toggletip.
* @default false
*/
open?: boolean;
/**
* Specify the icon to render for the toggletip button.
* Defaults to `<Information />`.
* @default Information
*/
icon?: Icon;
/**
* Specify the icon name attribute
* @default ""
*/
iconName?: string;
/**
* Specify the ARIA label for the toggletip button
* @default "Show information"
*/
iconDescription?: string;
/**
* Set the toggletip label text.
* Alternatively, use the "labelText" slot.
* @default ""
*/
labelText?: string;
/**
* Obtain a reference to the button HTML element.
* @default null
*/
ref?: null | HTMLButtonElement;
/**
* Set to `true` to render the content in a portal,
* preventing it from being clipped by `overflow: hidden` containers.
* By default, the content is portalled when inside a `Modal`.
* @default undefined
*/
portalTooltip?: boolean | undefined;
children?: (this: void) => void;
[key: `data-${string}`]: unknown;
};
export type ToggletipProps<Icon = any> = Omit<$RestProps, keyof $Props<Icon>> & $Props<Icon>;
export default class Toggletip<Icon = any> extends SvelteComponentTyped<
ToggletipProps<Icon>,
{
close: CustomEvent<null>;
open: CustomEvent<null>;
},
{
default: Record<string, never>;
/** Override the button icon. */
icon: Record<string, never>;
/** Set the toggletip label, rendered beside the button. */
labelText: Record<string, never>;
}
> {}