styple

Tooltip

Popup that displays content on hover or keyboard focus of associated element.

Examples

import { Tooltip } from "@styple/design-system";

<Flex
  css={{
    gap: "$md",
    alignItems: "center",
  }}
>
  <Tooltip content="Tooltip content">
    <Button highlight size="circle">
      <Plus style={{ verticalAlign: "middle" }} />
    </Button>
  </Tooltip>
  <Tooltip
    content={
      <><b>Drag</b> to move <br /> <b>Click</b> to open menu</>
    }
  >
    <Button highlight css={{ p: "0", borderRadius: "$md" }}>
      <GripVertical style={{ verticalAlign: "middle" }} />
    </Button>
  </Tooltip>
</Flex>

API Reference

See Radix-UI Tooltip (v0.1.7) for details. This only covers styple abstractions.

A styled abstraction of the entire primitive (except provider). Forwards props open, defaultOpen and onOpenChange. Custom props:

Prop	Type	Default	Explanation
`children`	`ReactElement`	-	Child to trigger tooltip.
`content`	`ReactNode`	-	The content of the tooltip.

TooltipProvider

The Tooltip.Provider that should wrap your app for tooltips to function properly.

Toggle

useMounted