Tooltip

The Tooltip component is used to display additional information when a user hovers over, focuses on, or taps an element. Below are examples of how to use it in Python Dash.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

# Custom title with styled content
custom_title = html.Div(
    [
        html.H4("Custom Tooltip Title", style={
            "margin": "0",
            "color": "white",
            "fontSize": "16px",
            "fontWeight": "bold"
        }),
        html.P("This is a custom tooltip content with multiple elements.", style={
            "margin": "8px 0 0 0",
            "fontSize": "14px",
            "color": "white"
        }),
        html.Span("info", style={
            "fontFamily": "Material Icons",
            "color": "white",
            "fontSize": "16px",
            "marginTop": "8px",
            "display": "block"
        })
    ],
    style={
        "padding": "8px",
        "maxWidth": "300px",
        "backgroundColor": "red",
    }
)

app.layout = dmc.YipitMUIProvider(
  children=[
    ## Example 1: Simple tooltip
    html.Div([
      dmc.Tooltip(
        children=dmc.Button("Hover me", variant="contained"),
        title="This is a simple tooltip",
        placement="bottom",
        arrow=True
      )
    ]),
    html.Div([
        # Styled tooltip with custom title
        dmc.Tooltip(
            children=dmc.Button(
                "Hover me for basic tooltip",
                variant="contained",
                color="primary"
            ),
            title=custom_title,
            arrow=True,
            placement="right",
            id="another-tooltip",
            sx={
                "tooltip": {
                    "backgroundColor": "rgba(0, 0, 0, 0.9)",
                    "borderRadius": "8px",
                    "padding": "12px",
                    "boxShadow": "0 4px 6px rgba(0, 0, 0, 0.1)"
                },
                "arrow": {
                    "color": "rgba(0, 0, 0, 0.9)"
                }
            }
        ),
    ]),
  ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table

Below are the main props available for the Tooltip component.

Prop	Type	Default	Description
id	string	-	The ID of the component, used for identifying dash components in callbacks
children	React.ReactElement	-	The element that will trigger the tooltip
title	React.ReactNode	-	The content of the tooltip
arrow	boolean	false	If true, adds an arrow to the tooltip
placement	string	"bottom"	Tooltip placement: "top", "bottom", "left", "right" or their variants with "-start" or "-end"
open	boolean	-	If true, the tooltip is shown
sx	object	-	The system prop that allows defining custom styles for tooltip parts
slots	object	-	Custom component slots for tooltip parts
disableHoverListener	boolean	-	If true, the tooltip won't respond to hover events
disableFocusListener	boolean	-	If true, the tooltip won't respond to focus events
disableTouchListener	boolean	-	If true, the tooltip won't respond to touch events
enterDelay	number	-	The number of milliseconds to wait before showing the tooltip
leaveDelay	number	-	The number of milliseconds to wait before hiding the tooltip
followCursor	boolean	-	If true, the tooltip follows the cursor

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Tooltip Documentation

Props Table​

Props Table