Tooltip

The Tooltip component is used to provide contextual information when users hover over or focus on an element. It enhances user interaction by delivering helpful insights without cluttering the UI. The component is built using the Root, Trigger, and Content elements to provide a complete tooltip functionality.

Usage

Tooltip Component Usage

import React from 'react';
import { Root, Trigger, Content } from '~/ui/components/Tooltip';
import { Button } from '@sfpy/styleguide'
import { TrashIcon } from 'lucide-react'

export default function App() {
  return (
    <Root>
      <Trigger asChild>
        <Button
          theme="primary-destructive"
          size="md"
          leftSlot={<TrashIcon />}
        />
      </Trigger>
      <Content>Delete this attachment</Content>
    </Root>
  );
}

Rendered Example

Props

Root

Name	Type	Default	Description
delayDuration	number	`0`	Duration in milliseconds before showing the tooltip after a hover or focus

Trigger

Name	Type	Default	Description
asChild	boolean	`false`	If `true`, wraps the child component directly to use its own element as the trigger

Content

Name	Type	Default	Description
sideOffset	number	`4`	The offset from the trigger element in pixels
className	string	`undefined`	Additional CSS classes for styling the tooltip

This documentation details how to implement and customize the Tooltip component, providing a dynamic way to present additional information in a user-friendly manner. If you need further details or another component documented, please let me know!