@corvu-next/tooltip

Tooltip component for SolidJS 2.0 with floating positioning, configurable delay, and animation support.

Note: This is the Solid 2.0 fork of corvu. It targets [email protected].

Features

• Floating UI-based positioning with automatic placement
• Configurable open/close delay
• Hover and focus trigger support
• CSS animation/transition support for show/hide
• Arrow element with automatic positioning
• Anchor element support for custom reference positioning
• Portal rendering
• Controlled and uncontrolled state

Installation

npm install @corvu-next/tooltip
# or
pnpm add @corvu-next/tooltip

Usage

import Tooltip from '@corvu-next/tooltip'

function MyTooltip() {
  return (
    <Tooltip.Root openDelay={500} closeDelay={200}>
      <Tooltip.Trigger>Hover me</Tooltip.Trigger>
      <Tooltip.Portal>
        <Tooltip.Content>
          <Tooltip.Arrow />
          Helpful tooltip text
        </Tooltip.Content>
      </Tooltip.Portal>
    </Tooltip.Root>
  )
}

API

| Component | Description | |-----------|-------------| | Tooltip.Root | Container. Props: open/onOpenChange for controlled mode, openDelay, closeDelay, placement. | | Tooltip.Trigger | Element that activates the tooltip on hover/focus. | | Tooltip.Portal | Renders children into a portal. | | Tooltip.Anchor | Custom anchor element for positioning (alternative to Trigger). | | Tooltip.Arrow | Arrow element pointing toward the anchor/trigger. | | Tooltip.Content | Tooltip content. Manages floating position and animations. Has role="tooltip". |

Further Reading

This package is part of corvu-next, a collection of unstyled, accessible and customizable UI primitives for SolidJS 2.0.