Usage

import { Tooltip } from '@loomhq/lens'

<Tooltip content="Non-natively focusable child" placement='topCenter'>
   <Text color="orange" fontWeight="bold" isInline>
      Hover or focus me
   </Text>
</Tooltip>

Hover or focus me

Accessibility

Please verify that your component supports the following accessibility features that come out of box and none of your modifications negate these features.

Tooltip should:

  • Have a clear trigger to open: Natively-focusable element (e.g., <Button type="button" ...>) or non-natively focusable element (e.g., <Text...>)
  • Be renderable and togglable (open and closeable) by every input device (mouse, keyboard, switch, etc).
  • Be helpers, not store critical information holders. Ask: If the user cannot access the Tooltip, are we inequitably hiding a critical piece of information that could impact their billing, for example, or their ability to use Loom? If yes, then render that information elsewhere more widely accessible.

Open:

  • Upon hover of its trigger
  • Upon focus of its trigger

Close:

  • Upon hover of its trigger
  • Upon blur of its trigger

Screenreader support

Screenreader support is still [WIP]. In-code comments outlines the remaining work with Linear ticket references.

Gotchas

  • Define tabIndex={-1} for the tooltip if your children have focusable elements. See Examples.

  • The Tooltip will not render if content={null}. Use case is typically to conditionally render the tooltip. Otherwise, if it's always null, consider removing the tooltip altgother.

  • focus and blur do not bubble, so if you have multiple nested layers of focusable elements within your Tooltip, you may experience issues. Recommendation is to always wrap your Tooltip at the lowest, most precise level around the trigger element and avoid nesting focusable items.

Placement

Max width

Trigger offset

Keep open

When keepOpen is true the Tooltip will stay open when it's hovered. By default, Tooltips stay open when they are keyboard focused.

Disabled

When isDisabled is true the Tooltip will never show.

Inline and block

Delay

Sets a delay on when to show the tooltip upon hover. Note that there is no delay for focus behaviour, which is by default immediate.

With shortcut

Tooltips with keyboard shortcuts

Container

Specify where it's going to be rendered in the DOM, this is especially useful when working with Shadow DOM.

<Tooltip content="Content" container={() => document.querySelector("#renderContainer")}>
  Trigger
</Tooltip>

TooltipBox

Tooltip uses TooltipBox internally, use it to build a tooltip with custom behavior.

Examples

IconButton with Tooltip (Natively-focusable child)

In order to prevent nested tabbing issues, make sure you assign tabIndex={-1} if you have any natively focusable children. Your natively focusable children will maintain their native tabIndeces and should receive the same tab order as without the Tooltip.

Props

Tooltip

name
type
default
placement
| 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'leftTop' | 'leftCenter' | 'leftBottom' | 'rightTop' | 'rightCenter' | 'rightBottom'
'topCenter'
triggerOffset
number
4
maxWidth
number | string | []
26
isInline
boolean
true
tabIndex
number
0
zIndex
number
1100
verticalAlign
string
'middle'
delay
'immediate' | 'long'
'immediate'
children
React.ReactNode
container
HTMLElement | (() => HTMLElement) | string
content
React.ReactNode
shortcut
string[]
isDisabled
boolean
keepOpen
boolean

TooltipBox

name
type
default
children
React.ReactNode
maxWidth
number | string | []
onMouseEnter
React.ReactEventHandler
onMouseLeave
React.ReactEventHandler
layerProps
any
zIndex
number