Toggle Tip
Looks like a tooltip, but works like a popover.
'use client'
import { Button, ToggleTip } from '@saas-ui/react'
import { LuInfo } from 'react-icons/lu'
export const ToggleTipBasic = () => {
return (
<ToggleTip content="This is some additional information.">
<Button size="xs" variant="ghost">
<LuInfo />
</Button>
</ToggleTip>
)
}
Anatomy
import { InfoTip, ToggleTip } from '@saas-ui/react/toggle-tip'<ToggleTip content="...">
<button />
</ToggleTip>Examples
Info Tip
Use the InfoTip component to display an info tip. This component renders an
icon button with an info icon by default.
Useful for landing pages to display additional information about a feature.
File size: 1.45 kB
'use client'
import { FormatByte, HStack, Text } from '@saas-ui/react'
import { InfoTip } from '@saas-ui/react'
export const ToggleTipInfoTip = () => {
return (
<HStack justify="center">
<Text textStyle="lg">
File size: <FormatByte value={1450.45} />
</Text>
<InfoTip>The file size for content.tsx is 1.45kb</InfoTip>
</HStack>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
autoFocus | true | booleanWhether to automatically set focus on the first focusable content within the popover when opened. |
closeOnEscape | true | booleanWhether to close the popover when the escape key is pressed. |
closeOnInteractOutside | true | booleanWhether to close the popover when the user clicks outside of the popover. |
lazyMount | false | booleanWhether to enable lazy mounting |
modal | false | booleanWhether the popover should be modal. When set to `true`: - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover |
portalled | true | booleanWhether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content. |
skipAnimationOnMount | false | booleanWhether to allow the initial presence animation. |
unmountOnExit | false | booleanWhether to unmount on exit. |
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg'The size of the component |
defaultOpen | booleanThe initial open state of the popover when rendered. Use when you don't need to control the open state of the popover. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{
anchor: string
trigger: string
content: string
title: string
description: string
closeTrigger: string
positioner: string
arrow: string
}>The ids of the elements in the popover. Useful for composition. | |
immediate | booleanWhether to synchronize the present change immediately or defer it to the next frame | |
initialFocusEl | () => HTMLElement | nullThe element to focus on when the popover is opened. | |
onEscapeKeyDown | (event: KeyboardEvent) => voidFunction called when the escape key is pressed | |
onExitComplete | VoidFunctionFunction called when the animation ends in the closed state | |
onFocusOutside | (event: FocusOutsideEvent) => voidFunction called when the focus is moved outside the component | |
onInteractOutside | (event: InteractOutsideEvent) => voidFunction called when an interaction happens outside the component | |
onOpenChange | (details: OpenChangeDetails) => voidFunction invoked when the popover opens or closes | |
onPointerDownOutside | (event: PointerDownOutsideEvent) => voidFunction called when the pointer is pressed down outside the component | |
open | booleanThe controlled open state of the popover | |
persistentElements | (() => Element | null)[]Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event | |
positioning | PositioningOptionsThe user provided options used to position the popover content | |
present | booleanWhether the node is present (controlled by the user) | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |