Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

tooltip

v4.5.2arrow_drop_down
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
1,446
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
2 months ago
SIZE
35 KB
Tooltips display informative text when users hover over, focus on, or tap an element.
2 contributors
Use tooltip in your project ?
Copied
npm i @bit/mui-org.material-ui.tooltip
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
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
Properties
NameTypeDescription
children
custom

Tooltip reference element.

classes
(required)
object

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

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).

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.

TransitionProps
object

Props applied to the Transition element.