React 18 · SSR Safe · TypeScript

react-portal-tooltip-upgraded

Tooltip rendered via a React portal — always on top, fully typed, works with Next.js and Remix out of the box.

$ npm install react-portal-tooltip-upgraded

Positions

Tooltip can be placed on any side of the trigger element.

Control arrow position or remove it entirely.

Pass a style prop to fully customise the tooltip and arrow colours.

No state management needed — hover behaviour is handled internally.

Hover the button, then slide your mouse onto the tooltip — with useHover=true it stays open.

useHover=true

useHover=false

Hover any username to see a rich card tooltip. Inspired by the original library GIF.

Tooltip position:

Hover the usernames below to display the tooltips

alex_rivers

sara_bloom

mike_chen

lena_kroft

tom_hazard

priya_sharma

jake_w

nina_fox

carlos_v

mei_zhang

dan_oakes

ava_sterling

<ToolTip
active={active}
parent={`#${id}`}
position="right"
arrow="center"
>
<UserCard user={user} />
</ToolTip>

Forked from react-portal-tooltip by Romain Berger · Maintained by Muhammad Murtaza