Tooltip

import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from '@fairgarden-private/design/components/Tooltip'
import { Button } from '@fairgarden-private/design/components/Button'
import styles from './variants.module.css'

/**
 * The three trigger forms: a label on icon-only buttons (sharing one
 * Provider, so neighbors open at once), a `help` hint beside a label, and a
 * dotted-underline term in running text.
 */
export function TooltipVariants() {
  return (
    <div className={styles.stack}>
      <TooltipProvider>
        <div className={styles.row}>
          <Tooltip>
            <TooltipTrigger render={<Button iconOnly icon="zoom_in">Zoom In</Button>} />
            <TooltipPopup>Zoom In</TooltipPopup>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger render={<Button iconOnly icon="zoom_out">Zoom Out</Button>} />
            <TooltipPopup>Zoom Out</TooltipPopup>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger render={<Button iconOnly icon="recenter">Reset View</Button>} />
            <TooltipPopup>Reset View</TooltipPopup>
          </Tooltip>
        </div>
      </TooltipProvider>

      <p className={styles.copy}>
        Membership tier{' '}
        <Tooltip>
          <TooltipTrigger kind="hint">About membership tiers</TooltipTrigger>
          <TooltipPopup>Tiers renew each spring.</TooltipPopup>
        </Tooltip>
      </p>

      <p className={styles.copy}>
        The parcel is protected by a{' '}
        <Tooltip>
          <TooltipTrigger kind="term">conservation easement</TooltipTrigger>
          <TooltipPopup side="bottom">A legal limit on development that stays with the deed.</TooltipPopup>
        </Tooltip>{' '}
        held by the trust.
      </p>
    </div>
  )
}

import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from '@fairgarden-private/design/components/Tooltip'
import { Button } from '@fairgarden-private/design/components/Button'
import styles from './color.module.css'

/**
 * The popup takes only the props passed to it: `primary` recolors its frame
 * and text, never the trigger's scales.
 */
export function TooltipColor() {
  return (
    <TooltipProvider>
      <div className={styles.row}>
        <Tooltip>
          <TooltipTrigger render={<Button iconOnly icon="download">Download Map</Button>} />
          <TooltipPopup>Overlay default</TooltipPopup>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger render={<Button iconOnly icon="download">Download Map</Button>} />
          <TooltipPopup primary="plum">Primary plum</TooltipPopup>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}

import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from '@fairgarden-private/design/components/Tooltip'
import { PresetGround } from '@/components/PresetGround'
import styles from './grounds.module.css'

const presets = ['paper', 'forest'] as const

/** The hint glyph and term underline follow the trigger's ground; the popup face is always the overlay scope. */
export function TooltipGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <p className={styles.name}>{preset}</p>
          <p className={styles.copy}>
            Trail grade{' '}
            <Tooltip>
              <TooltipTrigger kind="hint">About trail grades</TooltipTrigger>
              <TooltipPopup>Grades run from easy to strenuous.</TooltipPopup>
            </Tooltip>
          </p>
          <p className={styles.copy}>
            A{' '}
            <Tooltip>
              <TooltipTrigger kind="term">kettle pond</TooltipTrigger>
              <TooltipPopup>A pond left by a melting glacier.</TooltipPopup>
            </Tooltip>{' '}
            sits at the center.
          </p>
        </PresetGround>
      ))}
    </div>
  )
}