# Dash Bootstrap Components - Tooltip

**URL:** <https://community.plotly.com/t/dash-bootstrap-components-tooltip/28153>\
**Category:** Dash Python\
**Created:** [September 3, 2019, 11:18am UTC](https://community.plotly.com/t/dash-bootstrap-components-tooltip/28153 "2019-09-03T11:18:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fmacedo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/fmacedo/32/7790_2.png) [@fmacedo](https://community.plotly.com/u/fmacedo)\
**Post date:** [September 3, 2019, 11:18am UTC](https://community.plotly.com/t/dash-bootstrap-components-tooltip/28153/1 "2019-09-03T11:18:17Z")

</div>

I want to use the Tooltip component of Dash Bootstrap Components([https://dash-bootstrap-components.opensource.faculty.ai/l/components/tooltip](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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/402c93bec364ed7e309eb01bdb440e2e84bd367a.png)

---

<div class="post-metadata">

**Author:** ![fmacedo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/fmacedo/32/7790_2.png) [@fmacedo](https://community.plotly.com/u/fmacedo)\
**Post date:** [September 3, 2019, 11:56am UTC](https://community.plotly.com/t/dash-bootstrap-components-tooltip/28153/2 "2019-09-03T11:56:11Z")

</div>

Well, found a solution, which includes some CSS:

```python
    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:

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

```

with the result:

![22](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/45943b6e47bb4369b2314655bbe2f9ed89187e61.png)

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [September 3, 2019, 1:14pm UTC](https://community.plotly.com/t/dash-bootstrap-components-tooltip/28153/3 "2019-09-03T13:14:39Z")

</div>

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 🙂

```python
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/9ca4c3d18cb0eaf73e08c57320a8bc6f92d31403.png)

---

<div class="post-metadata">

**Author:** ![fmacedo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/fmacedo/32/7790_2.png) [@fmacedo](https://community.plotly.com/u/fmacedo)\
**Post date:** [September 3, 2019, 3:01pm UTC](https://community.plotly.com/t/dash-bootstrap-components-tooltip/28153/4 "2019-09-03T15:01:53Z")

</div>

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