Tooltip

Component

Storybook

Figma Demo

Guidelines

Intent

Tooltips are intended to provide concise and helpful information about a specific element.

Variations

• Placement: Specifies the position of the tooltip relative to the trigger element. Possible values include top, bottom, left, and right.
• Trigger: Tooltip triggers may either be an icon treatment or text treatment.

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.

Figma

Designers only need to be concerned with using the Tooltip component in their screens for prototype purposes or the Tooltip Trigger component for engineering handoff.

For functional prototypes:

• Drop the Tooltip component into your screen with Absolute Position turned on.
• Choose the trigger type you want via the nested instance.
• Choose the tooltip position based on where you want the container to appear relative to the trigger.
• Turn the state to visible and update the tooltip description.
• Turn the state back to default.

For handoffs when prototyping isn’t necessary:

• Drop the TooltipTrigger in your screen.
• Annotate your design with the tooltip text for your engineering partner.

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.

Content

While there is no character limit to a tooltip, keep tooltip content short and to the point. Remember that this is non-critical context that supports the experience, and it should not be relied upon to understand the experience.

Component Specs

API

• placement: string | Default: null
  The placement of the tooltip.

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

• triggeredBy: string | Default: null
  The id of the tooltip trigger.

• testId: string | Default: null
  The data-testid attribute to add to the tooltip.

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 Props
	extends Omit<
		ComponentProps<Popover>,
		'activeContent' | 'offset' | 'arrow' | 'arrowClass' | 'open'
	> {
	placement?: Placement | undefined;
	testId?: string;
	text: string;
	triggeredBy: string;
}