Develop

Styles

A popover is a floating content container that appears relative to a trigger element.

<div class="tng-popover">
  <div class="tng-popover-bubble">
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Elements

Arrow

An arrow can be placed at top, right, bottom or left using the data-placement attribute.

<div class="tng-popover">
  <div class="tng-popover-arrow" data-placement="top"></div>
  <div class="tng-popover-bubble">
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Note

Use data-placement to position the arrow on a border (top, right, bottom, or left). Position it along that border by setting --tng-popover-arrow-x or --tng-popover-arrow-y via JavaScript, using a library like Floating UI. See the recipe below.

Backdrop

<div class="tng-backdrop"></div>
<div class="tng-popover">
  <div class="tng-popover-bubble">
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Note

When .tng-popover is used as an HTML Popover, you can set .tng-popover .has-backdrop and it will automatically apply the .tng-backdrop background. No need to create this element yourself!

Close button

<div class="tng-popover">
  <div class="tng-popover-bubble">
    <button class="tng-icon-button is-neutral" aria-label="Close">
      <i class="tng-icon icon-close" aria-hidden="true"></i>
    </button>
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Title

<div class="tng-popover">
  <div class="tng-popover-bubble">
    <div class="tng-text-title">…</div>
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Ut aliqua.

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Ut aliqua.

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Link

<div class="tng-popover">
  <div class="tng-popover-bubble">
    <p class="tng-text-body">…</p>
    <a class="tng-link">Link</a>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Link

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Link

Recipes

Tooltip

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

This is a tooltip.

source code

Popover

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Ut aliqua.

This is a popover with interactive content.

source code

React

Popover

The Popover is a provider component that displays rich interactive content when triggered by a click. Unlike tooltips which appear on hover, popovers require explicit user interaction to open and close.

This component must wrap PopoverTrigger and PopoverContent to function correctly.

Properties

Prop	Type	Description	Optional
isContrast	boolean	Choose between dark or light version of the popover	✅
initialOpen	boolean	Whether the popover is initially open, false by default	✅
placement	Placement	Position of the popover relative to trigger (top, top-start, top-end | bottom, bottom-start, bottom-end | left, left-start, left-end | right, right-start, right-end). top by default	✅
offset	number	Distance in pixels between trigger and tooltip, defaults to 8px	✅

Example

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  IconButton,
} from '@tmedxp/react-components';

const PopoverExample = () => {
  return (
    <Popover placement="bottom" isContrast={false}>
      <PopoverTrigger>
        <IconButton iconName="info" size="sm" isNeutral />
      </PopoverTrigger>
      <PopoverContent title="More Information" labels={{ Close: 'Close' }}>
        <p>This is detailed interactive content.</p>
      </PopoverContent>
    </Popover>
  );
};

export { PopoverExample };

PopoverTrigger

The PopoverTrigger component wraps an element that opens the popover when clicked. It toggles the popover’s visibility on each click.

Must be used within a Popover provider.

The children of this component must be an interactable element (button, link,..)

Example

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  IconButton,
} from '@tmedxp/react-components';

const PopoverTriggerExample = () => {
  return (
    <Popover placement="right">
      <PopoverTrigger>
        <IconButton iconName="info" size="sm" isNeutral />
      </PopoverTrigger>
      <PopoverContent title="Details" labels={{ Close: 'Close popover' }}>
        Click the icon to toggle this popover
      </PopoverContent>
    </Popover>
  );
};

export { PopoverTriggerExample };

PopoverContent

The PopoverContent component displays interactive content in a panel. It includes a close button, optional title, optional link button, and can render as a modal on mobile devices.

Must be used within a Popover provider.

Properties

Prop	Type	Description	Optional
labels	PopoverLabels	Accessibility labels, requires Close property for close button	❌
title	string	Optional title displayed at the top of the popover	✅
linkProperties	LinkButtonProperties	Optional link button configuration displayed at the bottom	✅
useModalOnMobile	boolean	Renders as a modal on mobile devices, false by default	✅
className	string	Custom CSS class names for styling	✅

Example

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  IconButton,
} from '@tmedxp/react-components';

const PopoverContentExample = () => {
  return (
    <Popover placement="bottom">
      <PopoverTrigger>
        <IconButton iconName="info" size="sm" isNeutral />
      </PopoverTrigger>
      <PopoverContent
        title="Additional Information"
        linkProperties={{
          text: 'Learn More',
          href: '/more-info',
        }}
        useModalOnMobile={true}
        labels={{ Close: 'Close popover' }}
      >
        <p>This is detailed content with interactive elements.</p>
        <ul>
          <li>Feature 1</li>
          <li>Feature 2</li>
        </ul>
      </PopoverContent>
    </Popover>
  );
};

export { PopoverContentExample };

Tooltip

The Tooltip is a provider component that displays short contextual hints on hover or focus. It manages the state and positioning of tooltips, ensuring proper coordination between the trigger element and tooltip content.

This component must wrap TooltipTrigger and TooltipContent to function correctly.

Properties

Prop	Type	Description	Optional
isContrast	boolean	Choose between dark or light version of the tooltip	✅
initialOpen	boolean	Whether the tooltip is initially open, false by default	✅
placement	Placement	Position of the tooltip relative to trigger (top, top-start, top-end | bottom, bottom-start, bottom-end | left, left-start, left-end | right, right-start, right-end). top by default	✅
offset	number	Distance in pixels between trigger and tooltip, defaults to 8px	✅

Example

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

const TooltipExample = () => {
  return (
    <Tooltip placement="top" isContrast={false}>
      <TooltipTrigger>
        <IconButton iconName="info" size="sm" isNeutral />
      </TooltipTrigger>
      <TooltipContent>This is helpful information</TooltipContent>
    </Tooltip>
  );
};

export { TooltipExample };

TooltipTrigger

The TooltipTrigger component wraps an element that triggers the tooltip display. When the user hovers over or focuses on this element, the associated tooltip content appears.

Must be used within a Tooltip provider.

The children of this component must be an interactable element (button, link,…)

Example

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

const TooltipTriggerExample = () => {
  return (
    <Tooltip placement="top">
      <TooltipTrigger>
        <IconButton iconName="info" size="sm" isNeutral />
      </TooltipTrigger>
      <TooltipContent>Helpful information appears here</TooltipContent>
    </Tooltip>
  );
};

export { TooltipTriggerExample };

TooltipContent

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.

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 };

useTooltipContext hook

The useTooltipContext hook provides access to the tooltip context, allowing child components to interact with the tooltip state and positioning. This hook must be used within a Tooltip or Popover provider component.

Returns

The hook returns an object with the following properties:

Property	Type	Description
open	boolean	Current open/closed state of the tooltip
setOpen	(open: boolean) => void	Function to programmatically open or close the tooltip

Usage

This hook is primarily used internally by TooltipTrigger, TooltipContent, PopoverTrigger, and PopoverContent components but it can be used in custom components that need access to the tooltip state.

Example

import { useTooltipContext } from '@tmedxp/react-components';

const CustomText = () => {
  const { open } = useTooltipContext();
  return <p>Tooltip is {open ? 'open' : 'closed'}</p>;
};

const CustomComponent = () => {
  return (
    <Popover>
      <CustomText />
      <PopoverTrigger>
        <button>Toggle Tooltip</button>
      </PopoverTrigger>
      <PopoverContent>
        <span>Some text</span>
      </PopoverContent>
    </Popover>
  );
};

export { CustomTooltipComponent };