tooltip clipped inside container

[mrdobalina2k]

Describe the bug

Following the example on tooltips: https://docs.marimo.io/api/markdown/?h=tooltip#tooltips

I found that the tooltip becomes clipped inside the container. I need to manually add padding to the cell containing the tooltipped element.

This becomes a problem, in particular when using grid layout, where components can be placed freely. I'm not sure it's a bug, or simply a not very well implemented feature, but it is documented.

Environment

{
"marimo": "0.10.5",
"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",
"docutils": "0.20.1",
"itsdangerous": "2.2.0",
"jedi": "0.19.1",
"markdown": "3.6",
"narwhals": "1.14.0",
"packaging": "24.0",
"psutil": "5.9.8",
"pygments": "2.17.2",
"pymdown-extensions": "10.12",
"pyyaml": "6.0.1",
"ruff": "0.5.2",
"starlette": "0.37.2",
"tomlkit": "0.12.4",
"typing-extensions": "4.12.2",
"uvicorn": "0.29.0",
"websockets": "11.0.3"
},
"Optional Dependencies": {
"pandas": "2.2.2"
}
}

Code to reproduce

import marimo

__generated_with = "0.10.5"
app = marimo.App(width="medium", layout_file="layouts/test_grid.grid.json")


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


@app.cell
def _(mo):
    mo.ui.button(
        label='<div data-tooltip="This is a tooltip">Hover over me</div>'
    )
    return


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

[mscolnick]

Yea it should not be clipped, just not very well implemented. Maybe we can use the new HTML popover API to avoid the clipping: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using