Skip to content

Tooltip

Attaches a popover to a target component. Built with DynamicPopover.
import { Tooltip, TooltipProps } from '@ensdomains/thorin'
<div
style={{
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 20,
}}
>
<Tooltip
additionalGap={0}
content={<div>Content</div>}
mobilePlacement="top"
mobileWidth={250}
placement="top"
targetId="buttonIdTop"
width={250}
>
<Button
id="buttonIdTop"
psuedoDisabled
shadowless
shouldShowTooltipIndicator
style={{ width: 250 }}
>
Top
</Button>
</Tooltip>
<Tooltip
content={<div>Content</div>}
mobilePlacement="left"
mobileWidth={50}
placement="left"
targetId="buttonIdLeft"
width={100}
>
<Button
id="buttonIdLeft"
psuedoDisabled
shadowless
shouldShowTooltipIndicator
style={{ width: 250 }}
>
Left
</Button>
</Tooltip>
<Tooltip
additionalGap={0}
content={<div>Content</div>}
mobilePlacement="bottom"
mobileWidth={250}
open
placement="bottom"
targetId="buttonIdBottom"
width={250}
>
<Button
id="buttonIdBottom"
psuedoDisabled
shadowless
shouldShowTooltipIndicator
style={{ width: 250 }}
>
Bottom
</Button>
</Tooltip>
<Tooltip
content={<div>Content</div>}
mobilePlacement="right"
mobileWidth={50}
open
placement="right"
targetId="buttonIdRight"
width={100}
>
<Button
id="buttonIdRight"
psuedoDisabled
shadowless
shouldShowTooltipIndicator
style={{ width: 250 }}
>
Right
</Button>
</Tooltip>
</div>

Props
#

name
type
default
description
background
any
background
The background color for the tooltip
children*
Required
ReactElement<any, string | JSXElementConstructor<any>>
-
The anchor element for the popover
content
ReactNode
-
A text or component containg the content of the popover.

Background
#

Edit on GitHub