Dash Bootstrap CSS Components Documentation

Dash Python
1

I have been searching the internet for some kind of documentation on Dash Bootstrap Components and CSS for tooltips. Most of the information I have found was for CSS when used with HTML and that does not seem to work for DBC.

For example, the proceeding block of code will not work in a CSS file for a dash tooltip

.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

Instead, to achieve the same result, without the arrow, I have to do this

.tooltip-inner{
  width: 400px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}

I would like to customize the tooltip more, but cannot seem to find any information on it and I am wondering if there is anyone who is more familiar with this that can assist me.

2

Hi @RLucas1102 and welcome to the Dash community :slight_smile:

Can you say more about what you are trying to do? Are you using the dbc.Tooltip, and if so, have you tried using the style and/or className props? Or are you trying to style the dcc.Tooltip?

3

@AnnMarieW I am using the dbc.Tooltip because the tooltip will not be appearing in a table or graph of some sort, but a heading. It is very similar to the code contained in the link you provided. I think I was too adamant on getting the CSS file to work with the tooltip that I did not consider the properties.