TooltipContent

Description

The TooltipContent component displays the actual content of the tooltip. It appears in a floating bubble with an arrow pointing to the trigger element. The content automatically positions itself relative to the trigger and viewport.

Must be used within a Tooltip provider.

Component

Properties

TooltipContentProperties extends HTMLProps<HTMLElement> which means it includes all standard HTML element attributes.

Prop	Type	Description	Optional
className	string	Custom CSS class names for styling	✅

Example

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  IconButton,
} from '@tmedxp/react-components';

const TooltipContentExample = () => {
  return (
    <Tooltip placement="bottom" isContrast={true}>
      <TooltipTrigger>
        <IconButton iconName="help" size="sm" isNeutral />
      </TooltipTrigger>
      <TooltipContent className="custom-tooltip">
        <p>This is detailed information that helps the user.</p>
        <p>It can contain multiple elements.</p>
      </TooltipContent>
    </Tooltip>
  );
};

export { TooltipContentExample };