Dash Bootstrap Components Tooltip color

Dash Python
1

Is there a way to change the color of a DBC tooltip? I’m using a dark theme, and the tooltips are black. Just setting the ‘background’ style doesn’t do it, but there doesn’t seem to be anything in the css specifying the color should be black.

thanks!

2

HI @AaronO

You can try using the .tooltip-inner selector. You can add this to a .css file in the assets folder

For example:

.tooltip-inner {
    max-width: 200px;
    padding: .25rem .5rem;
    color: #fff;
    text-align: center;
    background-color: red;
    border-radius: .25rem;
}
2 Likes
3

Thanks - that works…except for the little arrow bit. I can set colors in the .tooltip-arrow class but except for background-color, they have no effect. Any idea?

4

Not quite intuitive, you need to define it for all directions. Try:

.tooltip-inner {
  background-color: yellow
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: yellow;
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: yellow;
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: yellow;
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: yellow;
}
5

For anyone still looking: you can try dmc.Tooltip.