{
"props": {
"children": { "type": { "name": "element" }, "required": true },
"arrow": { "type": { "name": "bool" }, "default": "false" },
"color": {
"type": {
"name": "enum",
"description": "'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'"
},
"default": "'neutral'",
"additionalInfo": { "joy-color": true }
},
"component": { "type": { "name": "elementType" } },
"describeChild": { "type": { "name": "bool" }, "default": "false" },
"direction": {
"type": { "name": "enum", "description": "'ltr'
| 'rtl'" },
"default": "'ltr'"
},
"disableFocusListener": { "type": { "name": "bool" }, "default": "false" },
"disableHoverListener": { "type": { "name": "bool" }, "default": "false" },
"disableInteractive": { "type": { "name": "bool" }, "default": "false" },
"disablePortal": { "type": { "name": "bool" }, "default": "false" },
"disableTouchListener": { "type": { "name": "bool" }, "default": "false" },
"enterDelay": { "type": { "name": "number" }, "default": "100" },
"enterNextDelay": { "type": { "name": "number" }, "default": "0" },
"enterTouchDelay": { "type": { "name": "number" }, "default": "700" },
"followCursor": { "type": { "name": "bool" }, "default": "false" },
"id": { "type": { "name": "string" } },
"keepMounted": { "type": { "name": "bool" }, "default": "false" },
"leaveDelay": { "type": { "name": "number" }, "default": "0" },
"leaveTouchDelay": { "type": { "name": "number" }, "default": "1500" },
"modifiers": {
"type": {
"name": "arrayOf",
"description": "Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain'
| 'afterRead'
| 'afterWrite'
| 'beforeMain'
| 'beforeRead'
| 'beforeWrite'
| 'main'
| 'read'
| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>"
}
},
"onClose": {
"type": { "name": "func" },
"signature": {
"type": "function(event: React.SyntheticEvent) => void",
"describedArgs": ["event"]
}
},
"onOpen": {
"type": { "name": "func" },
"signature": {
"type": "function(event: React.SyntheticEvent) => void",
"describedArgs": ["event"]
}
},
"open": { "type": { "name": "bool" } },
"placement": {
"type": {
"name": "enum",
"description": "'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top'"
},
"default": "'bottom'"
},
"size": {
"type": { "name": "enum", "description": "'sm'
| 'md'
| 'lg'" },
"default": "'md'",
"additionalInfo": { "joy-size": true }
},
"slotProps": {
"type": {
"name": "shape",
"description": "{ arrow?: func
| object, root?: func
| object }"
},
"default": "{}"
},
"slots": {
"type": { "name": "shape", "description": "{ arrow?: elementType, root?: elementType }" },
"default": "{}",
"additionalInfo": { "slotsApi": true }
},
"sx": {
"type": {
"name": "union",
"description": "Array<func
| object
| bool>
| func
| object"
},
"additionalInfo": { "sx": true }
},
"title": { "type": { "name": "node" } },
"variant": {
"type": {
"name": "enum",
"description": "'outlined'
| 'plain'
| 'soft'
| 'solid'"
},
"default": "'solid'",
"additionalInfo": { "joy-variant": true }
}
},
"name": "Tooltip",
"imports": ["import Tooltip from '@mui/joy/Tooltip';", "import { Tooltip } from '@mui/joy';"],
"slots": [
{
"name": "root",
"description": "The component that renders the root.",
"default": "'div'",
"class": "MuiTooltip-root"
},
{
"name": "arrow",
"description": "The component that renders the arrow.",
"default": "'span'",
"class": "MuiTooltip-arrow"
}
],
"classes": [
{
"key": "colorContext",
"className": "MuiTooltip-colorContext",
"description": "Class name applied to the root element when color inversion is triggered.",
"isGlobal": false
},
{
"key": "colorDanger",
"className": "MuiTooltip-colorDanger",
"description": "Class name applied to the root element if `color=\"danger\"`.",
"isGlobal": false
},
{
"key": "colorNeutral",
"className": "MuiTooltip-colorNeutral",
"description": "Class name applied to the root element if `color=\"neutral\"`.",
"isGlobal": false
},
{
"key": "colorPrimary",
"className": "MuiTooltip-colorPrimary",
"description": "Class name applied to the root element if `color=\"primary\"`.",
"isGlobal": false
},
{
"key": "colorSuccess",
"className": "MuiTooltip-colorSuccess",
"description": "Class name applied to the root element if `color=\"success\"`.",
"isGlobal": false
},
{
"key": "colorWarning",
"className": "MuiTooltip-colorWarning",
"description": "Class name applied to the root element if `color=\"warning\"`.",
"isGlobal": false
},
{
"key": "placementBottom",
"className": "MuiTooltip-placementBottom",
"description": "Class name applied to the root element if `placement` contains \"bottom\".",
"isGlobal": false
},
{
"key": "placementLeft",
"className": "MuiTooltip-placementLeft",
"description": "Class name applied to the root element if `placement` contains \"left\".",
"isGlobal": false
},
{
"key": "placementRight",
"className": "MuiTooltip-placementRight",
"description": "Class name applied to the root element if `placement` contains \"right\".",
"isGlobal": false
},
{
"key": "placementTop",
"className": "MuiTooltip-placementTop",
"description": "Class name applied to the root element if `placement` contains \"top\".",
"isGlobal": false
},
{
"key": "sizeLg",
"className": "MuiTooltip-sizeLg",
"description": "Class name applied to the root element if `size=\"lg\"`.",
"isGlobal": false
},
{
"key": "sizeMd",
"className": "MuiTooltip-sizeMd",
"description": "Class name applied to the root element if `size=\"md\"`.",
"isGlobal": false
},
{
"key": "sizeSm",
"className": "MuiTooltip-sizeSm",
"description": "Class name applied to the root element if `size=\"sm\"`.",
"isGlobal": false
},
{
"key": "tooltipArrow",
"className": "MuiTooltip-tooltipArrow",
"description": "Class name applied to the root element if `arrow={true}`.",
"isGlobal": false
},
{
"key": "touch",
"className": "MuiTooltip-touch",
"description": "Class name applied to the root element if the tooltip is opened by touch.",
"isGlobal": false
},
{
"key": "variantOutlined",
"className": "MuiTooltip-variantOutlined",
"description": "Class name applied to the root element if `variant=\"outlined\"`.",
"isGlobal": false
},
{
"key": "variantPlain",
"className": "MuiTooltip-variantPlain",
"description": "Class name applied to the root element if `variant=\"plain\"`.",
"isGlobal": false
},
{
"key": "variantSoft",
"className": "MuiTooltip-variantSoft",
"description": "Class name applied to the root element if `variant=\"soft\"`.",
"isGlobal": false
},
{
"key": "variantSolid",
"className": "MuiTooltip-variantSolid",
"description": "Class name applied to the root element if `variant=\"solid\"`.",
"isGlobal": false
}
],
"spread": false,
"themeDefaultProps": true,
"muiName": "JoyTooltip",
"forwardsRefTo": "HTMLButtonElement",
"filename": "/packages/mui-joy/src/Tooltip/Tooltip.tsx",
"inheritance": null,
"demos": "",
"cssComponent": false
}