Streamlit elements MUI Tooltip Error Raised

Custom Components
,
1

Trying to implement a “tooltip” on one of my streamlit elements items. See the second item in the code below.

with elements("test"):
    with mui.Grid(container=True, spacing=2):
        
        with mui.Grid(className="App", item=True, xs=12, md=3):
            mui.Typography(
                "Demographic Questions Answered",
                variant="body",
                sx={"fontFamily": "sans-serif", "fontSize" : "1rem"}
                )
            mui.Typography(str(n_responses), variant="h4")
        
        with mui.Grid(className="App", item=True, xs=12, md=3):
            mui.Tooltip(title="Hello")
            mui.Typography(
                "Evaluations with Demographic Responses",
                variant="body",
                sx={"fontFamily": "sans-serif", "fontSize" : "1rem"}
                )
            mui.Typography(str(n_evaluations), variant="h4")

When the mui.Tooltip is removed, both items show with no error. However, when the mui.Tooltip remains I get the following error:

image
image2214×202 10.4 KB

I’ve tried nesting it within the arguments, rather than context, and that doesn’t work either

2

I have also encountered this problem during testing, luckily I found a solution.

from streamlit_elements import elements, mui, html

with elements("test"):
    with mui.Grid(container=True, spacing=2):
        
        with mui.Grid(className="App", item=True, xs=12, md=3):
            mui.Typography(
                "Demographic Questions Answered",
                variant="body",
                sx={"fontFamily": "sans-serif", "fontSize" : "1rem"}
                )
            mui.Typography(str('Hello MUI'), variant="h4")
        
        with mui.Grid(className="App", item=True, xs=12, md=3):
            mui.Typography(
                "Evaluations with Demographic Responses",
                variant="body",
                sx={"fontFamily": "sans-serif", "fontSize" : "1rem"}
                )
            mui.Typography(str('Hello MUI'), variant="h4")
            with mui.Tooltip(title="Get started with Streamlit! Set up your development environment and learn the fundamental concepts, and start coding!"):
                with html.div():
                    mui.Typography(str('MUI Tooltip'), variant="h4")

Wishing you a smooth learning journey :cowboy_hat_face:

3

Thank you so much! Have you encountered any other issues where the html.div seems to solve?

4

The HTML of streamlit_ elements matches the HTML language perfectly, and you can use tags such as body, header, div, span, p, etc. to build any page element you want.