tooltip

v4.9.10arrow_drop_down
v4.9.10
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
210,873
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
41 KB
Tooltips display informative text when users hover over, focus on, or tap an element.
2 contributors
Install tooltip as a package?
Copied
npm i @bit/mui-org.material-ui.tooltip
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

If true, adds an arrow to the tooltip.

Tooltip reference element.

Do not respond to focus events.

Do not respond to hover events.

Do not respond to long press touch events.

The number of milliseconds to wait before showing the tooltip. This prop won’t impact the enter touch delay (enterTouchDelay).

The number of milliseconds to wait before showing the tooltip when one was already recently opened.

The number of milliseconds a user must touch the element before showing the tooltip.

This prop is used to help implement the accessibility logic. If you don’t provide this prop. It falls back to a randomly generated id.

Makes a tooltip interactive, i.e. will not close when the user hovers over the tooltip before the leaveDelay is expired.

The number of milliseconds to wait before hiding the tooltip. This prop won’t impact the leave touch delay (leaveTouchDelay).

The number of milliseconds after the user stops touching an element before hiding the tooltip.

Callback fired when the component requests to be closed.

Callback fired when the component requests to be open.

If true, the tooltip is shown.

Tooltip placement.

Props applied to the Popper element.

Tooltip title. Zero-length titles string are never displayed.

The component used for the transition. Follow this guide to learn more about the requirements for this component.

Props applied to the Transition element.

Demos:

API:

Properties
NameTypeDescription
arrow
bool

If true, adds an arrow to the tooltip.

children
custom

Tooltip reference element.

classes
object

Override or extend the styles applied to the component. See CSS API below for more details.

className
string
disableFocusListener
bool

Do not respond to focus events.

disableHoverListener
bool

Do not respond to hover events.

disableTouchListener
bool

Do not respond to long press touch events.

enterDelay
number

The number of milliseconds to wait before showing the tooltip. This prop won’t impact the enter touch delay (enterTouchDelay).

enterNextDelay
number

The number of milliseconds to wait before showing the tooltip when one was already recently opened.

enterTouchDelay
number

The number of milliseconds a user must touch the element before showing the tooltip.

id
string

This prop is used to help implement the accessibility logic. If you don’t provide this prop. It falls back to a randomly generated id.

interactive
bool

Makes a tooltip interactive, i.e. will not close when the user hovers over the tooltip before the leaveDelay is expired.

leaveDelay
number

The number of milliseconds to wait before hiding the tooltip. This prop won’t impact the leave touch delay (leaveTouchDelay).

leaveTouchDelay
number

The number of milliseconds after the user stops touching an element before hiding the tooltip.

onClose
function

The event source of the callback.

onOpen
function

The event source of the callback.

open
bool

If true, the tooltip is shown.

placement
'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'

Tooltip placement.

PopperProps
object

Props applied to the Popper element.

title
(required)
node

Tooltip title. Zero-length titles string are never displayed.

TransitionComponent
elementType

The component used for the transition. Follow this guide to learn more about the requirements for this component.

TransitionProps
object

Props applied to the Transition element.

Help and resources