I have a dense graph, but similar to the source you provided here. when I hover on top of multiple points, it will show images in a strip (as seen below).
the current code I’m using within the tooptips are
TOOLTIPS = """
src="@imgs" height="300" alt="@imgs" width="300"
style="float: left; margin: 0px 15px 15px 0px;"
Is it possible to customize how the image will appear? like plotting the image in a grid, and only showing the first 6 images underlying the overlapping point.
It might not be a question with bokeh but more like an HTML question? not sure where is a good place to put it.
The built-in hover tool does not support what you want:
- currently, all hits are always all displayed
- multiple tooltips for different hits are just stacked
There is an issue regarding the first bullet:
Provide hit_filter property on HoverTool and TapTool · Issue #9087 · bokeh/bokeh · GitHub
That would afford a mechanism to trim down a list of multiple hits (e.g. “take the first N” or filtering out by some criteria), however no-one has yet done the work to implement it. But even if that were done, I think it’s pretty unlikely that the default built-in tooltips for hover tool would ever do more than just arrange themselves in a stack.
However, starting with Bokeh 3.0 you don’t have to use the built-in tooltips, you can can create your own. To use the hover tool without built-in tooltips set
tooltips=None. Then you can specify a
CustomJS callback that filters the hover selection indices however is appropriate for your use case. This much as been possible for a long time, see this example:
What’s new (in Bokeh 3.0) is that you can add custom
Tooltip objects so your `CustomJS call back can set the contents of your tooltip to whatever HTML you like (e.g. arranging the images in a grid, etc.)
Thank you for the detailed explanation, I’ll try to use Bokeh 3.0 and customize my tooltips!