Tooltip

Playground

'use client';
import {
  Button,
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from '@mbsw/ui';
export default function Demo() {
  const settings = {
    "align": "center",
    "content": "Tooltip content",
    "side": "top"
  };
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="solid" tone="secondary">
            hover
          </Button>
        </TooltipTrigger>
        <TooltipContent
          side={settings.side as 'top' | 'right' | 'bottom' | 'left'}
          align={settings.align as 'start' | 'center' | 'end'}
          style={{ whiteSpace: 'pre-wrap' }}
        >
          {settings.content}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Properties

Side

Align

Content

Usage

Place Trigger and Content inside TooltipProvider. Give icon buttons an accessible name even when they have a tooltip.

'use client';
import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  Button,
} from '@mbsw/ui';

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button>hover</Button>
        </TooltipTrigger>
        <TooltipContent>Tooltip content</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

TooltipTooltipContentTooltipProviderTooltipTrigger