Skip to main content

Tooltip

Import​

import { TooltipProvider, Tooltip } from "@sparrowengg/twigs-react";

You should wrap your application with TooltipProvider to make sure that the tooltip is rendered correctly.

Usage​

TooltipProvider​

function App() {
  return (
    <TooltipProvider delayDuration={0}>
      <App />
    </TooltipProvider>
  );
}

Tooltip​

Open in playground 
<Tooltip content="Tooltip content">
  <Button> Hover me </Button>
</Tooltip>

Props​

TooltipProvider​

PropertyDescriptionTypeDefault
delayDurationThe duration from when the mouse enters a tooltip trigger until the tooltip opensnumber700
skipDelayDurationtime a user has to enter another trigger without incurring a delay againnumber300

Tooltip​

PropertyDescriptionTypeDefault
sizesize of the tooltipsm md lgsm
sideposition of tooltipbottom left right toptop
contentContent inside tooltipstring,JSX
alignThe preferred alignment against the triggerstart center endstart
delayDurationThe duration from when the mouse enters a tooltip trigger until the tooltip opensnumber700
disableHoverableContentPrevents TooltipContent from remaining open when hoveringbooleanfalse