Create hover tooltips over widgets in bokeh html apps

Dear community,

With Bokeh it is easy to create informative tooltips for the data in plots. How can I create and customize hover tooltips for widget elements in the resulting webpage?

All the searching about hover tooltips for Bokeh lead to plot tooltips. But I want to convey additional information to the user about the widgets in my app, specifically information about slider and select widgets.

I got it partially working by adding custom_css classes to the widgets and using my own css-file, but I am not able to fully customize my tooltips the way I want to. My remaining issues are as follows:

1. I would like to copy the style of the tooltips available for plots, but I cannot draw a border. It seems like another style setting forces border:0;
2. I cannot display the tooltip arrow. All the general examples on tooltips via css I can find use another css class for the tooltip itself, which is defined in html.
3. Currently I have defined the tooltip text for each tip in the styles.css. If possible, I would like to define them in the python code.

I posted this question on stackoverflow before, where you can find my full explanation and a working example:

I hope redirecting there is fine

As of Bokeh 3.0 it is possible to add tooltips to some Bokeh widgets directly with the API. See:

https://docs.bokeh.org/en/latest/docs/user_guide/interaction/tooltips.html#ui-elements-supporting-tooltips

That is just beautiful! Now I am really looking forward to Bokeh 3.1
The broken grid plots are holding me back ([BUG] sizing_mode='stretch_both' broken in gridplot (bokeh 3.0.2) · Issue #12614 · bokeh/bokeh · GitHub), but it seems you even managed to tackle that issue

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.