Toggle Tip

A popover-style tip that toggles on click, used for providing additional context.

Anatomy

<script>
  import { ToggleTip, InfoTip } from "@saas-ui/svelte/components/toggle-tip";
</script>

<ToggleTip content="Additional information">
  <button>Click me</button>
</ToggleTip>

<!-- Or use InfoTip for a preset info icon trigger -->
<InfoTip>Helpful information here</InfoTip>

Examples

Basic Accessibility

Basic toggle tip with icon trigger.

<Centre class="p-8">
	<ToggleTip
		content="This is some additional information."
		triggerIcon={Info}
		triggerSize="xs"
		triggerAriaLabel="More information"
	/>
</Centre>

Custom Content Accessibility

Use the children slot for custom content.

<Centre class="p-8">
	<ToggleTip triggerText="Custom Content" triggerVariant="outline">
		<VStack gap={1}>
			<Text size="xs" weight="semibold">Custom Content</Text>
			<Text size="xs">
				This toggle tip has custom HTML content with multiple
				elements.
			</Text>
		</VStack>
	</ToggleTip>
</Centre>

Info Tip Accessibility

Use InfoTip for a convenient info icon toggle tip.

<Centre class="p-8">
	<HStack justify="center">
		<Text size="lg">File size: 1.45kb</Text>
		<InfoTip>The file size for content.tsx is 1.45kb</InfoTip>
	</HStack>
</Centre>

Positioning Accessibility

Use the placement prop to control the position.

<Centre class="p-8">
	<HStack gap={4}>
		<ToggleTip
			content="Top placement"
			placement="top"
			triggerText="Top"
			triggerVariant="outline"
		/>
		<ToggleTip
			content="Right placement"
			placement="right"
			triggerText="Right"
			triggerVariant="outline"
		/>
		<ToggleTip
			content="Bottom placement"
			placement="bottom"
			triggerText="Bottom"
			triggerVariant="outline"
		/>
		<ToggleTip
			content="Left placement"
			placement="left"
			triggerText="Left"
			triggerVariant="outline"
		/>
	</HStack>
</Centre>

Sizes Accessibility

Use the size prop to change the size of the toggle tip.

<Centre class="p-8">
	<HStack gap={4}>
		<ToggleTip
			content="Extra small toggle tip"
			size="xs"
			triggerText="XS"
			triggerSize="xs"
		/>
		<ToggleTip
			content="Small toggle tip"
			size="sm"
			triggerText="SM"
			triggerSize="sm"
		/>
		<ToggleTip
			content="Medium toggle tip"
			size="md"
			triggerText="MD"
			triggerSize="md"
		/>
		<ToggleTip
			content="Large toggle tip"
			size="lg"
			triggerText="LG"
			triggerSize="lg"
		/>
	</HStack>
</Centre>

Props

Prop	Type	Default	Description
`content`	`text`	-	The content of the toggle tip.
`size`	`xs \| sm \| md \| lg`	`sm`	The size of the toggle tip.
`placement`	`top \| bottom \| left \| right`	`top`	The placement of the toggle tip.
`class`	`text`	-	CSS class to apply to the component.