InfoTooltip

The Info Tooltip is a specialized tooltip component that provides contextual information about elements in a consistent and accessible way. It's built on top of the base Tooltip component with additional styling and positioning options.

Features

Customizable positioning (top, right, bottom, left)
Alignment control (start, center, end)
Side offset adjustment
Disabled state support
Child element support via asChild prop

Usage

InfoTooltip Position Side

<div className="flex flex-col gap-8 p-4">
  <div className="flex w-full items-center justify-between gap-8">
    <Unknown>
      <Unknown>
        <Unknown>
          Right Tooltip
        </Unknown>
        <Unknown
          align="center"
          className="px-3 py-2 text-xs font-medium shadow-md rounded-lg focus:border focus:border-accent-12 focus:ring-2 focus:ring-grayA-4 focus-visible:outline-none focus:ring-offset-0 border border-grayA-4 bg-white dark:bg-black"
          side="right"
        >
          This is a tooltip on the right
        </Unknown>
      </Unknown>
    </Unknown>
    <Unknown>
      <Unknown>
        <Unknown>
          Left Tooltip
        </Unknown>
        <Unknown
          align="center"
          className="px-3 py-2 text-xs font-medium shadow-md rounded-lg focus:border focus:border-accent-12 focus:ring-2 focus:ring-grayA-4 focus-visible:outline-none focus:ring-offset-0 border border-grayA-4 bg-white dark:bg-black"
          side="left"
        >
          This is a tooltip on the left
        </Unknown>
      </Unknown>
    </Unknown>
    <Unknown>
      <Unknown>
        <Unknown>
          Top Tooltip
        </Unknown>
        <Unknown
          align="center"
          className="px-3 py-2 text-xs font-medium shadow-md rounded-lg focus:border focus:border-accent-12 focus:ring-2 focus:ring-grayA-4 focus-visible:outline-none focus:ring-offset-0 border border-grayA-4 bg-white dark:bg-black"
          side="top"
        >
          This is a tooltip on the top
        </Unknown>
      </Unknown>
    </Unknown>
  </div>
  <div className="flex w-full items-center justify-between gap-8">
    <Unknown>
      <Unknown>
        <Unknown>
          Bottom Tooltip
        </Unknown>
        <Unknown
          align="center"
          className="px-3 py-2 text-xs font-medium shadow-md rounded-lg focus:border focus:border-accent-12 focus:ring-2 focus:ring-grayA-4 focus-visible:outline-none focus:ring-offset-0 border border-grayA-4 bg-white dark:bg-black"
          side="bottom"
        >
          This is a tooltip on the bottom
        </Unknown>
      </Unknown>
    </Unknown>
    <Unknown>
      <Unknown>
        <Unknown>
          Custom Alignment
        </Unknown>
        <Unknown
          align="start"
          className="px-3 py-2 text-xs font-medium shadow-md rounded-lg focus:border focus:border-accent-12 focus:ring-2 focus:ring-grayA-4 focus-visible:outline-none focus:ring-offset-0 border border-grayA-4 bg-white dark:bg-black"
          side="right"
          sideOffset={50}
        >
          This tooltip has custom alignment
        </Unknown>
      </Unknown>
    </Unknown>
    <Unknown>
      <Unknown>
        <Unknown>
          Disabled Tooltip
        </Unknown>
        <Unknown
          align="center"
          className="px-3 py-2 text-xs font-medium shadow-md rounded-lg focus:border focus:border-accent-12 focus:ring-2 focus:ring-grayA-4 focus-visible:outline-none focus:ring-offset-0 border border-grayA-4 bg-white dark:bg-black"
          side="right"
        >
          This tooltip is disabled
        </Unknown>
      </Unknown>
    </Unknown>
  </div>
</div>

Props

Prop	Type	Default	Description
content	React.ReactNode	-	The content to display in the tooltip
position	TooltipPosition	-	Configuration for tooltip positioning
disabled	boolean	false	Whether the tooltip is disabled
asChild	boolean	false	Whether to render the trigger as a child element
delayDuration	number	-	Delay before showing the tooltip in milliseconds
variant	string	-	Styling variant for the tooltip
className	string	-	Additional CSS classes for the tooltip

Position Configuration

The position prop accepts an object with the following properties:

Property	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"right"	The side where the tooltip appears
align	"start" \| "center" \| "end"	"center"	The alignment of the tooltip
sideOffset	number	-	The offset from the side in pixels