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

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

WeChat Image_20221207160521285×929 381 KB

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.

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

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

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