Tooltip

The Tooltip component allows us to display a snippet of content when a user hovers over or focuses a trigger element.

Polymorphic Component

By default, content is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Basic Tooltip

Interact with the icon to see the tooltip:

import { Icon } from '@curology/ui-components-web/react/Icon';
import { Tooltip } from '@curology/ui-components-web/react/Tooltip';
import { TooltipContent } from '@curology/ui-components-web/react/Tooltip/TooltipContent';
import { TooltipTrigger } from '@curology/ui-components-web/react/Tooltip/TooltipTrigger';

<Tooltip as="span">
  <TooltipTrigger>
    <ChatBubbleIcon />
  </TooltipTrigger>
  <TooltipContent>Test Content</TooltipContent>
</Tooltip>

Highlight Tooltip

Interact with the icon to see the tooltip:

mport { Icon } from '@curology/ui-components-web/react/Icon';
import { Tooltip } from '@curology/ui-components-web/react/Tooltip';
import { TooltipContent } from '@curology/ui-components-web/react/Tooltip/TooltipContent';
import { TooltipTrigger } from '@curology/ui-components-web/react/Tooltip/TooltipTrigger';

  <TooltipTrigger>
    <ChatBubbleIcon />
  </TooltipTrigger>
  <TooltipContent>
    <div class="cur-self-center">
      <ChatBubbleIcon />
    </div>
    <div>
      <p className="cur-font-bold">Some content</p>
      <p>Some content</p>
    </div>
  </TooltipContent>
</Tooltip>

Props

TooltipProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
initialOpen	false | true		No	Whether the tooltip should be open by default.
modal	false | true		No	Whether the tooltip should be modal.
onOpenChange	(open: boolean) => void		No	Callback for when the tooltip is opened or closed. @param open @returns
open	false | true		No	Whether the tooltip is currently open.
options	TooltipOptions	{}	No	Tooltip options for Floating UI.
placement	"left" | "right" | "bottom" | "top" | "left-end" | "left-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "top-end" | "top-start"		No	The placement of the tooltip relative to the trigger.
tooltipType	"default" | "highlight"	TooltipType	No	Which type of tooltip should be displayed?