Tooltip not working on disabled elements

[mrdobalina2k]

Describe the bug

I want to add a tooltip that shows why a particular UI component is disabled, so the user can take action and fill some missing information. I tried following the example in the documentation (https://docs.marimo.io/api/markdown.html#tooltips), but found that it only works as long as the element is enabled.

Environment

{ "marimo": "0.9.1", "OS": "Windows", "OS Version": "11", "Processor": "Intel64 Family 6 Model 126 Stepping 5, GenuineIntel", "Python Version": "3.12.2", "Binaries": { "Browser": "129.0.6668.60", "Node": "v20.14.0" }, "Dependencies": { "click": "8.1.7", "importlib-resources": "missing", "jedi": "0.19.1", "markdown": "3.6", "pygments": "2.17.2", "pymdown-extensions": "10.7.1", "ruff": "0.5.2", "starlette": "0.37.2", "tomlkit": "0.12.4", "typing-extensions": "4.9.0", "uvicorn": "0.29.0", "websockets": "11.0.3" }, "Optional Dependencies": { "pandas": "2.2.2" } }

Code to reproduce

Here's an example to reproduce the issue.

import marimo

__generated_with = "0.9.1"
app = marimo.App(width="medium")


@app.cell
def __():
    import marimo as mo
    return (mo,)


@app.cell
def __(mo):
    button_enabled=mo.ui.button(
        label="<div data-tooltip='Set disabled=True to Disable'>This is enabled, and will show tooltip</div>", disabled=False
    )
    button_enabled
    return (button_enabled,)


@app.cell
def __(mo):
    button_disabled=mo.ui.button(
        label="<div data-tooltip='Set disabled=False to Enable'>This is disabled, but will not show tooltip</div>", disabled=True
    )
    button_disabled
    return (button_disabled,)


if __name__ == "__main__":
    app.run()

[mscolnick]

We disable pointer events https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events when elements are disabled, I can see what ARIA best practices are.

[mscolnick]

In the meantime, you can do something like this:

mo.md(rf"""<div data-tooltip='This is disabled'>{mo.ui.button(disabled=True)}</div>""").left()

[mrdobalina2k]

That's a neat trick. Thanks!