Tooltip

The Tooltip component displays a contextual hint that appears when hovering over a trigger element. It provides a simple way to show additional information without requiring a click.

Demo

React

Vue

Example

React

// Import components
import {
  Button,
  Tooltip,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/tooltip.css';

function MyComponent() {
  return (
    <Tooltip.Root
      positioning={{
        placement: 'top',
      }}
    >
      <Tooltip.Trigger asChild>
        <Button colorScheme="primary">
          Hover me
        </Button>
      </Tooltip.Trigger>

      <Tooltip.Content>
        This is a tooltip message
      </Tooltip.Content>
    </Tooltip.Root>
  );
}

Vue

<script setup lang="ts">
// Import components
import {
  Button,
  Tooltip,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/tooltip.css';
</script>

<template>
  <Tooltip.Root
    :positioning="{
      placement: 'top',
    }"
  >
    <Tooltip.Trigger>
      <Button color-scheme="primary">
        Hover me
      </Button>
    </Tooltip.Trigger>

    <Tooltip.Content>
      This is a tooltip message
    </Tooltip.Content>
  </Tooltip.Root>
</template>

Props

Tooltip Root Props

React

Name	Type	Default	Description
open	boolean	—	Whether the tooltip is open (controlled)
defaultOpen	boolean	false	Whether the tooltip is open by default (uncontrolled)
positioning	PositioningOptions	—	Positioning options for the tooltip. See PositioningOptions type below.

Vue

Name	Type	Default	Description
open	boolean	—	Whether the tooltip is open (controlled)
default-open	boolean	false	Whether the tooltip is open by default (uncontrolled)
positioning	PositioningOptions	—	Positioning options for the tooltip. See PositioningOptions type below.

Tooltip Trigger Props

React

Name	Type	Default	Description
asChild	boolean	false	When true, merges props with the child element instead of rendering a wrapper

Vue

Name	Type	Default	Description
as-child	boolean	false	When true, merges props with the child element instead of rendering a wrapper

Events

React

Name	Arguments	Description
onOpenChange	(details: { open: boolean }) => void	Callback fired when open state changes

Vue

Name	Arguments	Description
@open-change	(details: { open: boolean }) => void	Callback fired when open state changes

Types

type PositioningOptions = {
  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
  gutter?: number
  offset?: { mainAxis?: number; crossAxis?: number }
}

Components

Tooltip.Root

The root component that manages the tooltip state and provides context to child components. Supports both controlled and uncontrolled usage.

Tooltip.Trigger

The element that triggers the tooltip when hovered over. Use asChild prop to merge props with a child element.

Tooltip.Content

The main content container for the tooltip. Automatically includes positioning and portal rendering.