## Tooltip Use Tooltip component to render tooltip at given element on mouse over or any other event Category: Overlay ### Introduction ```python import dash_mantine_components as dmc component = dmc.Tooltip( dmc.Button("Button with tooltip"), label="Tooltip" ) ``` ### Interactive example ### Colors Tooltip supports all colors defined in Mantine's theme colors. ```python import dash_mantine_components as dmc dmc.Tooltip( label="This is a red colored tooltip.", color="red" ) ``` ### Position Tooltip position relative to target element is defined by the `position` prop. ```python import dash_mantine_components as dmc dmc.Tooltip( label="This is a tooltip", position="right", children=[...] ) ``` ### Offset The `offset` sets the space between tooltip and target element in px, can be negative. ```python import dash_mantine_components as dmc dmc.Tooltip( label="This is a tooltip", position="right", offset=5, children=[...] ) ``` ### Offset multi axis To control `offset` on both axis, pass dictionary with `mainAxis` and `crossAxis` properties: For an interactive demo see the [Mantine docs](https://mantine.dev/core/tooltip/#offset) ```python import dash_mantine_components as dmc dmc.Tooltip( label="This is a tooltip", position="top", offset={ "mainAxis": 50, "crossAxis": -50}, children=[...] ) ``` ### Arrow Set `withArrow` prop to add an arrow to the tooltip. Arrow is a div element rotated with `transform: rotate(45deg)`. `arrowPosition` prop determines how arrow is position relative to the target element when position is set to `*-start` and `*-end` values on `Popover` component. By default, the value is `center` – the arrow is positioned in the center of the target element if it is possible. If you change `arrowPosition` to `side`, then the arrow will be positioned on the side of the target element, and you will be able to control arrow offset with `arrowOffset` prop. Note that when `arrowPosition` is set to `center`, `arrowOffset` prop is ignored. ### Multiline By default, tooltip white-space property is set to nowrap. To change that use: * `multiline` - to enable line breaks * `w` - to define tooltip width in px ```python import dash_mantine_components as dmc component = dmc.Center( [ dmc.Tooltip( multiline=True, w=220, withArrow=True, label="Use this button to save this information in your profile," " after that you will be able to access it any time and share" " it via email.", children=dmc.Button("Multiline Tooltip", variant="outline"), ) ] ) ``` ### Inline Use the `boxWrapperProps` to style the tooltip for inline elements. ```python import dash_mantine_components as dmc component = dmc.Text( [ "NASA’s ", dmc.Tooltip( dmc.Mark("JWST"), label="James Webb Space Telescope", boxWrapperProps={"style": {"display": "inline-block"}}, ), " is the most powerful space telescope ever built.", ], span=True, ) ``` ### Transitions Tooltip is built with Transition component, it supports the following props. * `transition` - predefined transition name or transition object * `duration` - transition duration in ms, defaults to 100ms * `timingFunction` - timing function ```python import dash_mantine_components as dmc dmc.Tooltip( label="Fade transitions", transitionProps={ "transition": "fade", "duration": 200, "timingFunction": "ease" }, children=[ # children ], ) ``` ### Close and Open Delay You can delay tooltip open/close events by setting `openDelay` and `closeDelay` props in ms. Both props default to 0 and reset if user moves mouse over/out of target element before delay is expired. ```python import dash_mantine_components as dmc component = dmc.Group( [ dmc.Tooltip( dmc.Button("Delay Open - 500ms", variant="outline"), label="Opened after 500ms", openDelay=500, ), dmc.Tooltip( dmc.Button("Delay Close - 500ms", variant="outline"), label="Closed after 500ms", closeDelay=500, ), ] ) ``` ### Floating Tooltip `dmc.FloatingTooltip` component has the same API as `dmc.Tooltip` component but tooltip will follow mouse. ```python import dash_mantine_components as dmc component = dmc.Center( [ dmc.FloatingTooltip( label="Tooltip", color="orange", children=[ dmc.Center( dmc.Text("Hover over the box to see tooltip"), style={ "height": 100, "padding": 10, "border": "2px solid var(--mantine-color-gray-6)", }, ) ], ) ] ) ``` ### Target `target` prop is an alternative to the `Tooltip` `children`. It accepts a string (selector), an HTML element or a `ref` object with HTML element. Use target prop when you do not render tooltip target as JSX element, like when creating a Tooltip component in a clientside callback. Example of using target prop with a string selector: ```python import dash_mantine_components as dmc component = dmc.Box([ dmc.Button("Hover me to see tooltip", id="my-target"), dmc.Tooltip(target="#my-target", label="Tooltip over button") ]) ``` ### Limitations #### Setting width Tooltip children are wrapped in a `Box` with a default width of `fit-content`, which may override the width defined in the children. To work around this, you can set the width using `boxWrapperProps`. `boxWrapperProps` is a dictionary of style properties passed to the `Box` that wraps the tooltip children. In this example, both the `Textarea` and `boxWrapperProps` are used to set the width to 100%. ```python import dash_mantine_components as dmc component = dmc.Tooltip( label="tooltip label", children=dmc.Textarea( value="How to set the width of the textarea with a tooltip to 100%", w="100%" ), boxWrapperProps={"w": "100%"}, ) ``` #### Tooltip margin Any component you specify in `Tooltip` `children` prop is wrapped by a `Box` component under the hood. So adding a margin to your target component will also move the tooltip away. In order to prevent this, add margin to the wrapper component using the prop `boxWrapperProps` in `Tooltip`. ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Tooltip selectors | Selector | Static selector | Description | |----------|----------------|-------------| | tooltip | .mantine-Tooltip-tooltip | Root element | | arrow | .mantine-Tooltip-arrow | Tooltip arrow, rendered inside tooltip | #### Tooltip CSS variables | Selector | Variable | Description | |----------|----------|-------------| | tooltip | --tooltip-bg | Tooltip background-color | | tooltip | --tooltip-radius | Tooltip border-radius | | tooltip | --tooltip-color | Controls tooltip text color | #### Tooltip data attributes | Selector | Attribute | Condition | |----------|-----------|------------| | tooltip | data-multiline | `multiline` prop is set | ### Keyword Arguments #### Tooltip - children (a list of or a singular dash component, string or number; optional): Target element, must support `ref` prop and `...others`. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - arrowOffset (number; optional): Arrow offset in px, `5` by default. - arrowPosition (a value equal to: 'center', 'side'; optional): Arrow position relative to the tooltip, `side` by default. - arrowRadius (number; optional): Arrow `border-radius` in px, `0` by default. - arrowSize (number; optional): Arrow size in px, `4` by default. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether tooltip text color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast. - boxWrapperProps (dict; optional): Target box wrapper props. `boxWrapperProps` is a dict with keys: - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - closeDelay (number; optional): Close delay in ms, `0` by default. - color (optional): Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): If set, tooltip element will not be rendered. - events (dict; optional): Determines which events will be used to show tooltip, `{ hover: True, focus: False, touch: False }` by default. `events` is a dict with keys: - floatingStrategy (a value equal to: 'fixed', 'absolute'; optional): Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy), `'absolute'` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inline (boolean; optional): Must be set if the tooltip target is an inline element. - keepMounted (boolean; optional): If set, the tooltip will not be unmounted from the DOM when it is hidden, `display: none` styles will be applied instead. - label (a list of or a singular dash component, string or number; required): Tooltip content. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - middlewares (dict; optional): Floating ui middlewares to configure position handling, `{ flip: True, shift: True, inline: False }` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - multiline (boolean; optional): Determines whether content should be wrapped on to the next line, `False` by default. - offset (number; optional): Space between target element and tooltip in px, `5` by default. Number or FloatingAxesOffsets. - openDelay (number; optional): Open delay in ms. - opened (boolean; optional): Controlled opened state. - portalProps (dict; optional): Props to pass down to the portal when withinPortal is True. - position (a value equal to: 'top', 'left', 'bottom', 'right', 'top-end', 'top-start', 'left-end', 'left-start', 'bottom-end', 'bottom-start', 'right-end', 'right-start'; optional): Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component). - positionDependencies (list of boolean | number | string | dict | lists; optional): `useEffect` dependencies to force update tooltip position. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `theme.defaultRadius` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - target (string; optional): Selector, ref of an element or element itself that should be used for positioning. - transitionProps (dict; optional): Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type, `{ duration: 100, transition: 'fade' }` by default. `transitionProps` is a dict with keys: - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withArrow (boolean; optional): Determines whether the tooltip should have an arrow, `False` by default. - withinPortal (boolean; optional): Determines whether tooltip should be rendered within `Portal`, `True` by default. - zIndex (string | number; optional): Tooltip z-index, `300` by default. #### FloatingTooltip - children (a list of or a singular dash component, string or number; optional): Target element, must support `ref` prop and `...others`. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether tooltip text color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast. - boxWrapperProps (dict; optional): Target box wrapper props. `boxWrapperProps` is a dict with keys: - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, controls tooltip background, by default set based on current color scheme. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): If set, tooltip element will not be rendered. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - label (a list of or a singular dash component, string or number; required): Tooltip content. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - middlewares (dict; optional): Floating ui middlewares to configure position handling, `{ flip: True, shift: True, inline: False }` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - multiline (boolean; optional): Determines whether content should be wrapped on to the next line, `False` by default. - offset (number; optional): Offset from mouse in px, `10` by default. - portalProps (dict; optional): Props to pass down to the portal when withinPortal is True. - position (a value equal to: 'top', 'left', 'bottom', 'right', 'top-end', 'top-start', 'left-end', 'left-start', 'bottom-end', 'bottom-start', 'right-end', 'right-start'; optional): Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component). - radius (number; optional): Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `theme.defaultRadius` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - target (string; optional): Selector, ref of an element or element itself that should be used for positioning. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withinPortal (boolean; optional): Determines whether tooltip should be rendered within `Portal`, `True` by default. - zIndex (string | number; optional): Tooltip z-index, `300` by default.