Tooltip

The Tooltip component is a client-side component that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It is built with Radix's Tooltip.

It uses four of Radix's Tooltip parts:

• Tooltip: wrapper that contains all of the parts of the tooltip
• TooltipTrigger: button that toggles the tooltip
• TooltipContent: content shown when the tooltip is open
• TooltipProvider: provides functionality to the tooltips

Example

Preview

Code

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@hv/ui/tooltip';
import { Info } from 'lucide-react';

export default function PopoverExample() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>
          <div className='flex gap-3'>
            Hover or focus to view
            <Info />
          </div>
        </TooltipTrigger>
        <TooltipContent>
          <div>This is the tooltip content.</div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Props

While the High Velocity front-end app does not extend the Radix Tooltip parts, the hv-ui component does change the default value for the sideOffset property. For a list of all other props and their defaults, see the Radix TooltipContent table.

Property	Description	Type
sideOffset	The distance in pixels from the trigger. Default is 4.	Number

Customization

Customizations to this component can be made directly to the source file in the UI library package or one-off styles can be passed in as className overrides to the TooltipContent component.