Toggle Tip

Looks like a tooltip, but works like a popover.

AI TipWant to skip the docs? Use our Agent Skills

Setup

For ease of use, create a closed component composition for the ToggleTip component.

import {
  Popover as ChakraPopover,
  IconButton,
  type IconButtonProps,
  Portal,
} from "@chakra-ui/react"
import * as React from "react"
import { HiOutlineInformationCircle } from "react-icons/hi"

export interface ToggleTipProps extends ChakraPopover.RootProps {
  showArrow?: boolean
  portalled?: boolean
  portalRef?: React.RefObject<HTMLElement | null>
  content?: React.ReactNode
  contentProps?: ChakraPopover.ContentProps
}

export const ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>(
  function ToggleTip(props, ref) {
    const {
      showArrow,
      children,
      portalled = true,
      content,
      contentProps,
      portalRef,
      ...rest
    } = props

    return (
      <ChakraPopover.Root
        {...rest}
        positioning={{ ...rest.positioning, gutter: 4 }}
      >
        <ChakraPopover.Trigger asChild>{children}</ChakraPopover.Trigger>
        <Portal disabled={!portalled} container={portalRef}>
          <ChakraPopover.Positioner>
            <ChakraPopover.Content
              width="auto"
              px="2"
              py="1"
              textStyle="xs"
              rounded="sm"
              ref={ref}
              {...contentProps}
            >
              {showArrow && (
                <ChakraPopover.Arrow>
                  <ChakraPopover.ArrowTip />
                </ChakraPopover.Arrow>
              )}
              {content}
            </ChakraPopover.Content>
          </ChakraPopover.Positioner>
        </Portal>
      </ChakraPopover.Root>
    )
  },
)

export interface InfoTipProps extends Partial<ToggleTipProps> {
  buttonProps?: IconButtonProps | undefined
}

export const InfoTip = React.forwardRef<HTMLDivElement, InfoTipProps>(
  function InfoTip(props, ref) {
    const { children, buttonProps, ...rest } = props
    return (
      <ToggleTip content={children} {...rest} ref={ref}>
        <IconButton
          variant="ghost"
          aria-label="info"
          size="2xs"
          colorPalette="gray"
          {...buttonProps}
        >
          <HiOutlineInformationCircle />
        </IconButton>
      </ToggleTip>
    )
  },
)

Alternatively, you can add it to your project using the following command.

npx @chakra-ui/cli snippet add toggle-tip

The snippet includes a closed component composition for the Popover component.

Usage

import { InfoTip, ToggleTip } from "@/components/ui/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

Sizes

The toggle tip supports xs, sm, md, and lg size variants. Pass the size prop to both the component and the button to scale it consistently.

Arrow

Set showArrow to display a directional arrow pointing from the popover content to the trigger element.

Close on Escape

By default (true), pressing the Escape key closes the toggle tip. Set to false to keep it open on Escape.

Close on Interact Outside

By default (true), clicking outside the toggle tip closes it. Set to false to allow outside interaction without closing.

Props

Root

Prop	Default	Type
`autoFocus`	`true`	`boolean` Whether to automatically set focus on the first focusable content within the popover when opened.
`closeOnEscape`	`true`	`boolean` Whether to close the popover when the escape key is pressed.
`closeOnInteractOutside`	`true`	`boolean` Whether to close the popover when the user clicks outside of the popover.
`hideMode`	`''display-none''`	`HideMode` How to hide content when mounted but not present. - `'display-none'`: HTML `hidden` attribute. Effects stay alive. - `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+.
`portalled`	`true`	`boolean` Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
`restoreFocus`	`true`	`boolean` Whether to restore focus to the element that had focus before the popover was opened.
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`defaultOpen`		`boolean` The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover.
`defaultTriggerValue`		`string` The initial trigger value when rendered. Use when you don't need to control the trigger value.
`finalFocusEl`		`() => MaybeElement` Element to receive focus when the popover is closed.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ anchor: string trigger: string \| ((value?: string \| undefined) => 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`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`initialFocusEl`		`() => HTMLElement \| null` The element to focus on when the popover is opened.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`modal`	`false`	`boolean` Whether 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
`onEscapeKeyDown`		`(event: KeyboardEvent) => void` Function called when the escape key is pressed
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function invoked when the popover opens or closes
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onRequestDismiss`		`(event: LayerDismissEvent) => void` Function called when this layer is closed due to a parent layer being closed
`onTriggerValueChange`		`(details: TriggerValueChangeDetails) => void` Function called when the trigger value changes.
`open`		`boolean` The 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`		`PositioningOptions` The user provided options used to position the popover content
`present`		`boolean` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`triggerValue`		`string` The controlled trigger value
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.

Popover

Tooltip

Toggle Tip

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Setup

Setup