Dash Bootstrap Components - Tooltip

Dash Python
1

I want to use the Tooltip component of Dash Bootstrap Components(https://dash-bootstrap-components.opensource.faculty.ai/l/components/tooltip) but over a question mark with a colored circle around it, something like this:

aaaa2
aaaa2.png734×261 6.74 KB

2

Well, found a solution, which includes some CSS:

    html.Div([

         html.Span(
              "?",
              id="tooltip-target",
              style={
                     "textAlign": "center", 
                     "color": "white"
              },
              className="dot"),

         dbc.Tooltip(
              "Some help text",
               target="tooltip-target",
         )
    ])

While in the local CSS file I created a .dot class:

>   .dot {
>   height: 25px;
>   width: 25px;
>   background-color: #bbb;
>   border-radius: 50%;
>   display: inline-block;
> }

with the result:

22

1 Like
3

I’ve found FontAwesome to be pretty great for this sort of thing too, which minimises the amount of CSS you need to write. The icons match font colour and can be easily resized by adding classes like fa-lg, making it easy to style them. Here’s a little example, no additional CSS required :slightly_smiling_face:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"

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

app.layout = html.Div(
    [
        html.I(className="fas fa-question-circle fa-lg", id="target"),
        dbc.Tooltip("Some help text", target="target"),
    ],
    className="p-5 text-muted"
)

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

image

3 Likes
4

Lovely! I came across FontAwesome a while ago, but never gave it too much usage. Seems like a great source!

1 Like