I’m trying to set up a switch to toggle all tooltips. I thought dbc.Tooltip’s property autohide would be what I waslooking for but no.
Here’s a minimal example of what I tried:
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_daq as daq
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
html.Div('Hallo', id='div-hallo'),
dbc.Tooltip('HALLO!', target='div-hallo', id='tt-hallo'),
daq.BooleanSwitch(id='toggle-tooltips')
])
@app.callback(Output('tt-hallo', 'autohide'),
Input('toggle-tooltips', 'on'))
def _toggle_tooltip(toggle):
return toggle
if __name__ == "__main__":
app.run_server(debug=True)
I don’t quite understand the question about the Popover? Could you elaborate?
The autohide property controls whether the tooltip hides itself or not when the cursor is moved over the tooltip text. You can see it with this example
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[
dbc.Button("autohide=True", id="btn-autohide", className="mr-3"),
dbc.Button("autohide=False", id="btn-nohide"),
dbc.Tooltip(
"This tooltip hides when the cursor is over it", target="btn-autohide",
),
dbc.Tooltip(
"This tooltip doesn't hide when the cursor is over it",
target="btn-nohide",
autohide=False,
),
],
className="p-5",
)
if __name__ == "__main__":
app.run_server(debug=True)
For the Popover component I’d need a property that I could toggle with a callback to switch it on or off like the ‘disabled’ property of other components.
The Popover component doesn’t render anything until it’s open, so there’s nothing to “disable”. Preventing it from appearing will depend on how you’re making it appear in the first place. If it’s with the BooleanSwitch component like your original example then you should disable the switch, not the popover (if the switch is disabled then the popover can’t be made to appear).
You can always dismiss the popovers by setting is_open=False from a callback. The answer to your question really depends on what is triggering that callback. If you want to stop the user from making the popovers appearing, it means stopping the user from triggering the callback that makes the popover appear, which means disabling the button / switch / whatever that triggers the callback.
Since that’s in your control, you can make sure that if the button / switch / whatever is disabled, you also close any open popovers at the same time.
I have a dashboard with plenty of tooltips for nooby users. Once the user is used to the program he/she should have the chance to avoid those tooltips popping up. Therefore I’d need a switch to keep them from showing. The user should also have the option to switch them back on. Doesn’t seem like something hard to achieve does it?
Thanks for the explanation. No that is not hard to achieve, I recommend doing so with a bit of custom CSS in your assets/ folder that can be applied by a callback
# app.py
import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[
dbc.Button("Tooltip", id="target"),
dbc.Checklist(
options=[{"label": "Enable tooltips", "value": True}],
id="toggle",
switch=True,
),
dbc.Tooltip("This is a tooltip", target="target", id="tooltip"),
],
className="p-5",
)
@app.callback(Output("tooltip", "className"), Input("toggle", "value"))
def toggle(value):
if not value:
return "tooltip-hide"
return ""
if __name__ == "__main__":
app.run_server(debug=True)
