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