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
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