Embedding a Bokeh plot inside a tooltip

I’m in the process of migrating a bokeh-based dashboard from 2.4.3 to 3.2.2. In one of my plots, I have implemented a method to embed some simple bokeh plots inside the tooltip of another plot and I did that by following the solution provided here: Bar plot inside Tooltip - #4 by Bryan
This solution worked perfectly fine in Bokeh 2.4 but I can’t make it work with the latest version of Bokeh. For reference, the code from the link above (slightly modified for V3.2.2) is:

import json

from bokeh.embed import json_item
from bokeh.models import ColumnDataSource, CustomJSHover, HoverTool
from bokeh.plotting import figure, show

source = ColumnDataSource(data=dict(x=[1, 4, 8], y=[2, 8, 5]))

p = figure()
p.circle('x', 'y', size=20, source=source)


p2 = figure(height=150, width=400, toolbar_location=None)
p2.hbar(y=[1, 2], right=[5, 10], height=0.8)
out = json.dumps(json_item(p2, "tooltip-plot"))
source.data['plot'] = [out, out, out]

code="""
    Bokeh.embed.embed_item(JSON.parse(value))
    return ""
"""

p.add_tools(HoverTool(
    tooltips='<div id="tooltip-plot">@plot{custom}</div>',
    formatters={ '@plot': CustomJSHover(code=code) }
))

show(p)

When I run this, I get the following error in my browser (which is the same as the error I get in my own code that used to work):

Uncaught (in promise) Error: Error rendering Bokeh model: could not find #tooltip-plot HTML tag

It looks like Bokeh.embed.embed_item is not able to find the HTML div with the given tag. Any help for how to resolve this is greatly appreciated. Thanks in advance and thanks for the awesome library!

@nmasnadi AFAIK official support for this was added in 2.4:

Add support for embedding plots/layouts in tooltips by mattpap · Pull Request #11165 · bokeh/bokeh · GitHub

The current location of the relevant example from that PR for latest releases is here:

https://github.com/bokeh/bokeh/blob/branch-3.3/examples/plotting/periodic_shells.py

This is an under-documented feature and I don’t really have any personal experience trying to use it any time recently, so if you encounter issues with that example, please open a new GH issue.

@Bryan thanks for the quick response! I was not aware of this solution. It’s much more elegant than what I did in the past. I was able to follow the code you shared and modified my code accordingly and it worked!

@nmasnadi This is a very under-documented feature, AFAIK there is just the one example and nothing else. Please feel free to open a GitHub Issue to propose increasing the documentation support for this feature.

@Bryan I opened a Github issue for increased documentation support:

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