TooltipTrigger

The TooltipTrigger component is used to provide a trigger for the Tooltip component.

Component

Storybook

Storybook - TooltipTrigger Documentation

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

  • Placement: Specifies the position of the tooltip relative to the trigger element. Possible values include top, bottom, left, right.

Usage

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.

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' | 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';
}

type Props = IconProps | TextProps;