Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

Question mark icon with hover effects? Dash tooltips

There are user-adjustable parameters in a data analysis application we’re building and we’re interested in having a simple icon (i.e. question mark) for users to be able to hover over and get information about each parameter. Is there any easy way to do this?

Thanks in advance!

2 Likes

Just entered forum to ask about the same thing! Hope someone has been doing it already with dash.

I have found HTML tag <abbr> that does show text on hover. Together with Unicode U+003F for question mark, it gives about what you need.

html.Abbr("\u003F", title="Hello, I am hover-enabled helpful information.")

One can use also small question mark, to make it more discrete U+FE56:

html.Abbr("\uFE56", title="Hello, I am hover-enabled helpful information.")
3 Likes

Nice find @radekwlsk! html.Abbr seems like a good way to do this for now. Here’s a HTML / CSS example that shows some different examples: https://codepen.io/MJBurrage/pen/pvmPdd. Note that the data- properties are not available in Dash right now.

You can also use a question mark with a combining circle (font-dependent) for a nice quick “help” link: ?⃝

which is \u003f\u20dd

3 Likes

Can you tell me how to make it inline with heading text?

html.Div(children=[html.H6("Select Model"), html.Abbr("\u2753", title="Hello, I am hover-enabled helpful information.")]),

The abbreviation comes in the newline how to avoid it? I want to be inline with html.H6

But how can we make it inline with other html tags like html.h6("Select threshold: ") I want abbr to be inline with the labels.

Try this:

html.Div([
    html.H6("Select Model", style={'display': 'inline-block', 'margin-right': '5px'}), 
    html.Abbr("\u2753", title="Hello, I am hover-enabled helpful information.")
])
1 Like