Skip to main content

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Basic usage​

import { Tooltip, Button, Slot } from '@streamelements/frontend-ui';

function AppRoot({ children }: PropsWithChildren<unknown>) {
  return <Tooltip.Provider>
    {children}
  </Tooltip.Provider>;
}

export function MyTooltip() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger asChild>
        <Button variant="ghost">hover me</Button>
      </Tooltip.Trigger>
      <Tooltip.Content>
        Tooltip content
      </Tooltip.Content>
    </Tooltip.Root>
  )
}

Tooltip​

Documentation is available here: https://radix-ui.com/primitives/docs/components/tooltip#content