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

tooltip

v3.9.2arrow_drop_down
v3.9.2
STATUS
Passing
DOWNLOADS
1,336
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
34 KB
Tooltips display informative text when users hover over, focus on, or tap an element.
1 contributor
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
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
modifieddraft
modifieddraft
withStyles(styles)(EnhancedTable);
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDefault valueDescription
children
element

Tooltip reference element.

classes
object

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

disableFocusListener
boolfalse

Do not respond to focus events.

disableHoverListener
boolfalse

Do not respond to hover events.

disableTouchListener
boolfalse

Do not respond to long press touch events.

enterDelay
number0

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

enterTouchDelay
number1000

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

id
string

The relationship between the tooltip and the wrapper component is not clear from the DOM. This property is used with aria-describedby to solve the accessibility issue. If you don’t provide this property. It falls back to a randomly generated id.

interactive
boolfalse

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

leaveDelay
number0

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

leaveTouchDelay
number1500

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''bottom'

Tooltip placement.

PopperProps
object

Properties applied to the Popper element.

theme
object
title
node

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

TransitionComponent
customGrow

The component used for the transition.

TransitionProps
object

Properties applied to the Transition element.