Is it possible to customize image display for mouse hovering up?

[xinwei-zhuang]

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 = """
    <div>
        <div>
            <img
                src="@imgs" height="300" alt="@imgs" width="300"
                style="float: left; margin: 0px 15px 15px 0px;"
                border="1"
            ></img>
        </div>
    </div>
"""

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.

[Bryan]

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:

https://docs.bokeh.org/en/latest/docs/user_guide/interaction/js_callbacks.html#customjs-for-hover-tool

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.)

[xinwei-zhuang]

Thank you for the detailed explanation, I’ll try to use Bokeh 3.0 and customize my tooltips!