HoverTool background transparency

[niskrev]

Hi,
I want to add bokeh plots in a JupyterBook. I have a problem with the appearance of the hovertool in the book HTML output. The example below is with a plot from the bokeh gallery, but the same occurs with other plots I have tried.

In the notebook itself, the hover tooltip appears as it should

However, in the jupyterbook the background becomes transparent and it is difficult to read the values

I am not sure what causes the problem, tried different browsers (Chrome, Safari, and Edge) with the same result. Is there a way to enforce or change the background color or opacity?
Thanks!

[Bryan]

I don’t know that there is any immediate answer. ^[1] I’ve never used Jupyterbook, but it seems evident that it is mucking with CSS in some way that conflicts with Bokeh’s tooltip. It will just take some investigation to figure out how to prevent that. I would suggest opening your browser dev tools and seeing if you can find any helpful clues, and then submitting a GitHub Issue would be the next appropriate step.

---

1. AFAIK any immediate work-around would necessarily involve injecting some custom CSS in to the Jupyterbook output, but I have no idea how to do that or if it is even possible, that’s really a question for the jupyter folks. ↩︎

[niskrev]

Thanks @Bryan, your reply helped me find the solution. Indeed it had to do with CSS setting background-color to transparent. This was a bug that has been fixed recently and the solution for me was just to install the most recent release of the myst-nb package.

[Bryan]

Always nice to hear the solution is fixed upstream

[odadoun]

Hello,

I have exactly the same problem the transparent background isn’t working.
Can you please give me the exact syntax you have used ?
By advance thank you
Olivier

[odadoun]

Here my solution add this callback

callback = CustomJS(code=“”"
document.getElementsByClassName(‘bk-tooltip’)[0].style.backgroundColor=“transparent”;
“”" )