Turn-off Deck.gl tooltip in Superset

445 views Asked by At

does anbody kwno how I can modify the properties of the Deck.gl tooltip in Superset using CSS? My goad is to completely deactivate the tooltip. I tried the following which solved my problem partially:

.deckgl-tooltip{
  display:none;
}

BUT: I still see a small black square instead of the tooltip. How can I get rid of this square?

enter image description here

EDIT: below is a screenshot of the map and the code. When I scroll over the map, that yellowish highlighted class ('css-y3eng8') appears and it is dynamic in a sense, that it changes the class name when I move over the map.

enter image description here

Here is a link to the copy of outer HTML: https://codefile.io/f/MXx4crq6R6

2

There are 2 answers

0
vuongtlt13 On BEST ANSWER

Your custom CSS does not point to correct element

enter image description here

The custom CSS should be:

#chart-id-182 > div > div:nth-child(2) {
  display: none;
}

Don't worry about #chart-id-182, it always be fixed for a chart

2
display_name On

Try getTooltip (Function in JavaScript).

The simple function that can be done in JavaScript;

JavaScript

var deckgl = new deck.DeckGL({
  // Other properties...
  getTooltip: ({object}) => object ? { // When the tooltip is hovered
    html: `${object.name}`,
    style: {
      // Some styles e.g. background: "#000"
    }
  } : (null) // Else (if not hovered)
});