TooltipTrigger

Component

Storybook

Figma Demo

Guidelines

• Use tooltips to provide concise and helpful information about a specific element.
• Tooltips should not contain critical information that users might miss.
• Keep the text brief and to the point.

Variations & Usage

• Placement: Specifies the position of the tooltip relative to the trigger element. Possible values include top, bottom, left, right. The Tooltip component is composed of TooltipContainer and TooltipTrigger.

The Tooltip component is composed of TooltipContainer and TooltipTrigger.

TooltipContainer: Handles the possible layouts of the container based on the direction of TooltipTail.

TooltipTrigger: One of two variants for how tooltips are exposed in the UI — either via an icon treatment or text treatment. Text treatments are offered in base size (16px), sm (14px), or xs (12px).

Designers only need to be concerned with using the Tooltip component in their screens.

Best Practices

• Consistency: Use the Tooltip component consistently across your application to provide a unified user experience.
• Testing: Utilize the testId prop for reliable testing and automation.

Component Specs

API

• class: string | Default: null
  Additional classes to add to the tooltip trigger.

• testId: string | Default: null
  Test ID for the tooltip trigger.

• id: string | Default: null
  ID for the tooltip trigger.

• size: 'default' | 'sm' | 'xs' | Default: 'default'
  The size of the tooltip trigger.

• text: string | Default: null
  The text to display in the tooltip trigger.

• variant: 'icon' | 'text' | Default: 'icon'
  The type of tooltip trigger to render.

Example

<script>
	import { TooltipTrigger, Tooltip } from '@getprovi/craft-svelte';
</script>

<TooltipTrigger id="icon-tooltip" />
<Tooltip triggeredBy="icon-tooltip">This is a tooltip</Tooltip>

<TooltipTrigger id="text-tooltip" variant="text" text="Text tooltip" />
<Tooltip triggeredBy="text-tooltip">This is a tooltip</Tooltip>
<TooltipTrigger id="custom-tooltip"> This is a custom trigger. </TooltipTrigger>
<Tooltip triggeredBy="custom-tooltip">
	<span>This is a custom tooltip.</span>
	<span>That has multiple lines.</span>
</Tooltip>

Types

interface SharedProps {
	class?: string | null | undefined;
	testId?: string;
	id: string;
}

interface IconProps extends SharedProps {
	variant?: 'icon';
	size?: never;
	text?: never;
}

interface TextProps extends SharedProps {
	variant: 'text';
	text: string;
	size?: 'default' | 'sm' | 'xs';
}

type Props = IconProps | TextProps;