Autohide dbc.Tooltips not working as expected

Dash Python
1

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)
2

It’s not possible to control the tooltip with a callback currently. Perhaps you could achieve something like this with the Popover component instead?

4

But Popover doesn’t have a ‘disable’ property either or am I missing something?

What is the ‘autohide’ property of dbc.Tooltip doing atm if now hiding the tooltip?

5

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)
6

For me there’s absolutely no difference of the two tooltips you posted

7

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.

8

Here’s a gif showing the difference

ezgif-6-c53dd42dcd4b

1 Like
9

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).

11

But then I can’t switch off Popovers once initiated right?

12

This is how I could make it work. A bit laborious but it does the job

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 = dbc.Card(dbc.CardBody([
    html.Div('hallo', id='div-hallo'),
    html.Div('hallo2', id='div-hallo2'),
    dbc.Tooltip('HALLO!', target='div-hallo', id='tt-hallo'),
    dbc.Tooltip('HALLO!2', target='div-hallo2', id='tt-hallo2'),
    html.Div('dummy', id='dummy-tooltips'),
    daq.BooleanSwitch(id='toggle-tooltips', on=True)
]))


@app.callback([Output('tt-hallo', 'target'),
               Output('tt-hallo2', 'target')],
              Input('toggle-tooltips', 'on'))
def _toggle_tooltip(on):
    if on:
        return 'div-hallo', 'div-hallo2'
    else:
        return 'dummy-tooltips', 'dummy-tooltips'


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

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.

14

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? :smiley:

15

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)

/* assets/style.css */
.tooltip-hide .tooltip {
  display: none;
}

If you have multiple tooltips to apply this to, you could target them with a pattern-matching callback

1 Like
16

thanks - wasn’t hard to do indeed!