Tooltip

import { Tooltip } from '@kivora/react';

import { Tooltip, Button } from '@kivora/react';

function Example() {
  return (
    <Tooltip content="Save your changes" side="top">
      <Button label="Save" />
    </Tooltip>
  );
}

<Tooltip content="Appears above" side="top">
  <Button label="Top" />
</Tooltip>

<Tooltip content="Appears below" side="bottom">
  <Button label="Bottom" />
</Tooltip>

<Tooltip content="Appears on left" side="left">
  <Button label="Left" />
</Tooltip>

<Tooltip content="Appears on right" side="right">
  <Button label="Right" />
</Tooltip>

import { Info } from 'lucide-react';

<Tooltip content="Additional information about this feature" side="top">
  <button className="p-1 rounded hover:bg-accent">
    <Info size={16} className="text-muted-foreground" />
  </button>
</Tooltip>

<p>
  This feature is{' '}
  <Tooltip content="Available in Pro plan" side="top">
    <span className="underline decoration-dotted cursor-help">
      premium only
    </span>
  </Tooltip>
</p>

import { Copy, Download, Share } from 'lucide-react';

function ActionBar() {
  return (
    <div className="flex gap-1">
      <Tooltip content="Copy link" side="top">
        <button className="p-2 rounded hover:bg-accent">
          <Copy size={18} />
        </button>
      </Tooltip>
      <Tooltip content="Download" side="top">
        <button className="p-2 rounded hover:bg-accent">
          <Download size={18} />
        </button>
      </Tooltip>
      <Tooltip content="Share" side="top">
        <button className="p-2 rounded hover:bg-accent">
          <Share size={18} />
        </button>
      </Tooltip>
    </div>
  );
}

<Tooltip content="⌘+S" side="bottom">
  <Button label="Save" />
</Tooltip>

<Tooltip content="⌘+C" side="bottom">
  <Button label="Copy" />
</Tooltip>

<Tooltip content="You don't have permission" side="top">
  <span className="inline-block">
    <Button label="Delete" disabled />
  </span>
</Tooltip>

<Tooltip
  content="This is a longer tooltip message that provides detailed information"
  side="top"
>
  <Button label="Help" />
</Tooltip>

<Tooltip
  content="This tooltip can wrap to multiple lines when the content is very long"
  side="top"
  className="max-w-xs whitespace-normal"
>
  <Button label="Info" />
</Tooltip>

function FormField() {
  return (
    <div>
      <label className="flex items-center gap-2 text-sm font-medium mb-2">
        Email address
        <Tooltip content="We'll never share your email" side="top">
          <Info size={14} className="text-muted-foreground" />
        </Tooltip>
      </label>
      <input
        type="email"
        className="w-full border rounded p-2"
        placeholder="[email protected]"
      />
    </div>
  );
}

function StatusBadge() {
  return (
    <Tooltip content="All systems operational" side="top">
      <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-green-100 text-green-800 text-xs font-medium">
        <span className="w-1.5 h-1.5 rounded-full bg-green-600" />
        Online
      </span>
    </Tooltip>
  );
}

<Tooltip
  content="Custom styled tooltip"
  className="[&_[role=tooltip]]:bg-primary [&_[role=tooltip]]:text-primary-foreground"
>
  <Button label="Hover me" />
</Tooltip>