Custom HTML Hover and Bokeh Plotting with `by` doesn't work for all groups

DrAstro · July 19, 2025, 2:51pm

I’m trying to use a custom hover with a basic line + scatter plot. This is with the aim of displaying an image.

The data is grouped so I plot using by.

For example:

import pandas as pd

import holoviews as hv
import hvplot.pandas
from bokeh.models import HoverTool

df = pd.DataFrame(
    {
        "x": [1, 2, 3, 4, 1, 2, 3, 4],
        "y": [1, 2, 3, 4, 2, 3, 4, 5],
        "group": ["A", "A", "A", "A", "B", "B", "B", "B"],
        "image": ["path", "path", "path", "path", "path", "path", "path", "path"]
    }
)

line = df.hvplot(
            x="x",
            y="y",
            by="group",
            grid=True,
            hover=False,
            legend=True,
        )

points = df.hvplot(
            x="x",
            y="y",
            by="group",
            grid=True,
            kind="scatter",
            size=100,
            marker="circle",
            hover_cols=[
                "image",
            ],
        )

line * points

With no custom hover this plots fine and the hover works on both groups.

Now if I use a custom HTML hover tool:

hover = HoverTool(tooltips = """
    <div>
        <div>
            <span style="font-size: 15px;">Location</span>
            <span style="font-size: 10px; color: #696;">($x, $y)</span>
        </div>
    </div>
""")

line = df.hvplot(
            x="x",
            y="y",
            by="group",
            grid=True,
            hover=False,
            legend=True,
        )

points = df.hvplot(
            x="x",
            y="y",
            by="group",
            grid=True,
            kind="scatter",
            size=100,
            marker="circle",
            hover_cols=[
                "image",
            ],
            tools=[hover]
        )

line * points

The hover works on the first series:

But nothing displays on the second series.

Am I missing something here? Is there a way to force the custom hover on to all series?

Thanks in advance for any help.

Versions:
bokeh-3.7.3 holoviews-1.21.0 hvplot-0.11.3 panel-1.7.4

DrAstro · July 19, 2025, 4:12pm

Well I found the way around it at least.

If I split out the plotting of the groups and make sure that the HTML has a difference between the groups then the hover works as expected.

I feel like I must be missing something here

Workaround:

def get_new_hover(cnt):
    return HoverTool(tooltips = f"""
    <div>
        <div>
            <span style="font-size: 15px;">Location</span>
            <span style="font-size: 10px; color: #696;">($x, $y)</span>
        </div>
        <div id="{cnt}" style="display: none;">
    </div>
""")

grouped_df = df.groupby("group", group_keys=True)

main_points = None
main_lines = None

for cnt, (name, group) in enumerate(grouped_df):
    lines = group.hvplot(
        x="x",
        y="y",
        grid=True,
        hover=False,
        legend=True,
        label=name
    )
    if main_lines is None:
        main_lines = lines
    else:
        main_lines *= lines

    points = group.hvplot(
        x="x",
        y="y",
        grid=True,
        kind="scatter",
        size=100,
        marker="circle",
        label=name,
        tools=[get_new_hover(cnt)]
    )

    if main_points is None:
        main_points = points
    else:
        main_points *= points

final = (main_lines * main_points)
final