Skip to content

Tooltip

Attaches a popover to a Button component. Built with DynamicPopover.
import { Tooltip, TooltipProps } from '@ensdomains/thorin'
<Tooltip
content={<div>Content</div>}
open={getState('isOpen')}
placement="bottom-start"
onDismiss={() => setState('isOpen', false)}
>
<Button pressed={getState('isOpen')} onClick={() => toggleState('isOpen')}>
Click me
</Button>
</Tooltip>

Props
#

name
type
default
description
content
ReactNode
-
A text or component containg the content of the popover.

Placement
#

Bottom

<DeleteMe flexDirection="row" justifyContent="space-between">
<Tooltip
content={<div>Content</div>}
open={getState('isOpen1')}
placement="bottom-start"
onDismiss={() => setState('isOpen1', false)}
>
<Button
pressed={getState('isOpen1')}
onClick={() => toggleState('isOpen1')}
>
Click me
</Button>
</Tooltip>
<Tooltip
content={<div>Content</div>}
open={getState('isOpen2')}
placement="bottom-center"
onDismiss={() => setState('isOpen2', false)}
>
<Button
pressed={getState('isOpen2')}
onClick={() => toggleState('isOpen2')}
>
Click me
</Button>
</Tooltip>
<Tooltip
content={<div>Content</div>}
open={getState('isOpen3')}
placement="bottom-end"
onDismiss={() => setState('isOpen3', false)}
>
<Button
pressed={getState('isOpen3')}
onClick={() => toggleState('isOpen3')}
>
Click me
</Button>
</Tooltip>
</DeleteMe>

Horizontal

<DeleteMe alignItems="center" flexDirection="column">
<Tooltip
content={<div>Content</div>}
open={getState('isOpen1')}
placement={`${getState('side')}-start`}
onDismiss={() => setState('isOpen1', false)}
>
<Button
pressed={getState('isOpen1')}
onClick={() => toggleState('isOpen1')}
>
Click me
</Button>
</Tooltip>
<Tooltip
content={<div>Content</div>}
open={getState('isOpen2')}
placement={`${getState('side')}-center`}
onDismiss={() => setState('isOpen2', false)}
>
<Button
pressed={getState('isOpen2')}
onClick={() => toggleState('isOpen2')}
>
Click me
</Button>
</Tooltip>
<Tooltip
content={<div>Content</div>}
open={getState('isOpen3')}
placement={`${getState('side')}-end`}
onDismiss={() => setState('isOpen3', false)}
>
<Button
pressed={getState('isOpen3')}
onClick={() => toggleState('isOpen3')}
>
Click me
</Button>
</Tooltip>
<Button
onClick={() =>
setState('side', getState('side') === 'right' ? 'left' : 'right')
}
>
Switch Side
</Button>
<VisuallyHidden>{setDefaultState('side', 'left')}</VisuallyHidden>
</DeleteMe>

Top

<DeleteMe
flexDirection="row"
justifyContent="space-between"
style={{ marginTop: '100px' }}
>
<Tooltip
content={<div>Content</div>}
open={getState('isOpen1')}
placement="top-start"
onDismiss={() => setState('isOpen1', false)}
>
<Button
pressed={getState('isOpen1')}
onClick={() => toggleState('isOpen1')}
>
Click me
</Button>
</Tooltip>
<Tooltip
content={<div>Content</div>}
open={getState('isOpen2')}
placement="top-center"
onDismiss={() => setState('isOpen2', false)}
>
<Button
pressed={getState('isOpen2')}
onClick={() => toggleState('isOpen2')}
>
Click me
</Button>
</Tooltip>
<Tooltip
content={<div>Content</div>}
open={getState('isOpen3')}
placement="top-end"
onDismiss={() => setState('isOpen3', false)}
>
<Button
pressed={getState('isOpen3')}
onClick={() => toggleState('isOpen3')}
>
Click me
</Button>
</Tooltip>
</DeleteMe>
Edit on GitHub