Help Texts Near Each Chart

Dash Python
1

Hello,

I’d like to insert some sort of “?” icon that would open a text uppon clicking. Like a very simple help section close to each chart.

What would be the best approach?

2

Hello @pedromsouza,

The best way would probably be to create a function that generates a card configured in the layout that you would like.

You could even use pattern-matching to make it easier to use callbacks.

Something like this:

import dash
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
from dash_iconify import DashIconify
import plotly.express as px

app = Dash(__name__)

def createMyChart(id, figure, helpText):
    myCard = dbc.Card([dcc.Graph(figure=figure, id={'index': f'{id}', 'type': 'cardGraph'}),
                       html.Div(DashIconify(icon="material-symbols:question-mark", style={"color":"white"}),
                                id={'index': f'{id}', 'type': 'cardMoreInfo'},
                                style={"position": "absolute", "bottom": "0px", "right": "0px",
                                       "borderRadius":"20px", "padding":"3px", "backgroundColor":"silver"}),
                       dbc.Popover(
                           helpText,
                           target={'index': f'{id}', 'type': 'cardMoreInfo'},
                           body=True,
                           trigger="hover",
                           placement="bottom",
                           style={"position":"absolute"}
                       ), ], style={"position": "absolute"})
    return myCard

app.layout = html.Div([createMyChart('testing',px.scatter(), 'hello, I am helpful text')])

app.run(port=12345, debug=True)
1 Like