Show text with line beaks in dash bootstrap components popover body

Dash Python
1

Hi,
I would like to dynamically load a text for a popover body and to be able to consider line breaks.
Because I load the text info from a json object it would be nice to integrate html code for line breaks like
directly, but this does not work.
I found out that a flag for using html in bootstrap popovers is disabled by default (security reasons) and that it cannot be turned on in dbc.
Another approach which I found for core component tooltips is to use a markdown object (dcc.Markdown). However, this approach cannot be used with dbc.PopoverBody. At least I cannot get it to work.
A working alternative could be to manually set up the body’s children as a set of html.P’s and html.Br’sm directly on the code side.

This would maybe work, but is not really an elegant approach, when someone wants to load more different and longer texts from a dict or just a str variable.

Any ideas?

2

Hi @anotherUser

You can put dcc.Markdown inside a dbc.Popover. Here is an example:

image

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc


app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

markdown_content = """
### This is some cool content
And this is another line
"""

app.layout = html.Div(
    [
        dbc.Button(
            "Click Me",
            id="component-target",
            n_clicks=0,
        ),
        dbc.Popover(
            [
                dbc.PopoverHeader("Popover header"),
                dbc.PopoverBody(dcc.Markdown(markdown_content)),
            ],
            target="component-target",
            trigger="click",

        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Note - to change the width of the dbc.Popover you can set it in a .css file in the assets folder:


.popover {
    max-width: 600px;
}
3

Oh, wait - I see what you mean. If you change the markdown_content variable to html tags in the example above, it won’t work:


markdown_content = """
<h3>This is some cool content</h3>
<p>This is more some cool content</h3>

"""

   ...

dbc.PopoverBody(dcc.Markdown(markdown_content, dangerously_allow_html=True)),

But if you put the html tag in the component like this, it will work:

dbc.PopoverBody(dcc.Markdown("<h3>This is some cool content</h3>", dangerously_allow_html=True)),
4

Thank you for the replies!

I will have a closer look at it in 2023 and give further feedback.

Seasons’ greetings :slight_smile: