Tooltip

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