How can I make the tooltip that appears when hovering over a data point stay fixed when the data point is clicked?

[djlee]

Hello,

I am using Bokeh 3.4.1 to create a graph. I would like to fix the tooltip that shows the data value when I hover over the data on the graph, so that it remains on the graph when I click on it.

I tried using CustomJS with document.getElementById("tooltip"); but it returns null. I’ve tried various approaches, but all have failed.

I would appreciate your help.

Thank you.

[Jonas_Grave_Kristens]

@djlee One approach is to not let the HoverTool itself display the tooltip information but use a Label instead and attach a CustomJS callback to the HoverTool. You can then also attach a CustomJS to a TapTool which controls whether the TapTool has been activated. Use that information so that the hover info stays even if the cursor is moved; the tags argument of the TapTool is used in the code below.

For example (pseudo code):

hover_info_label = Label(
    // use text properties to align label with hover x, y coordinate
    text_base_line = 'top' // maybe, you need to test
    name = 'hover_info_label'
)
p.add_layout(hover_info_label)

hover_cb = CustomJS(
    code = """
    const hover_info = plot.select('hover_info_label')[0];
    const tap = plot.select('tap')[0];
    const idx = cb_data.index.indices; // I assume point data

    if (idx.length === 0) {
      // if taptool has activated hover_info
      if (tap.tags === [1]) {
        return;
      } else {
        hover_info.visible = false;
        return;
      }
    }
    // hover in data units
    const hover_x = cb_data.geometry.x; 
    const hover_y = cb_data.geometry.y;

    hover_info.text = 'Hello';
    hover_info.x = hover_x;
    hover_info.y = hover_y;
    hover_info.visible = true;
    """
)
hover = HoverTool(
    tooltips = None,
    callback = hover_cb
)

tap_cb = CustomJS(
    args = {
        'source': source
    }, 
    code ="""
    var tap_activated = [0];
    const idx = source.inspected.indices;
    if (idx.length > 0) {
      // tap event activated on a source data point
      tap_activated = [1];
    }
    cb_obj.tags = tap_activated;
    }
    """
)
p.js_on_event('tap', tap_cb)

tap = TapTool(name = 'tap')

p.add_tools(hover, tap)

[Bryan]

Currently traveling so I can’t do more than a link and run but also see:

Implementing Sticky Hover Tool in Bokeh

The underlying technical work for a persistent tooltip has already been done, in this PR: Which was added for 3.0 awhile back. These Tooltip objects can be attached to just about anything, but the specific use-case of adding them to plots is not yet very well demonstrated. Additionally there are probably some conveniences that are missing to make this specific use-case simpler. [1] The motivation at the time was for adding them to widgets, etc, so that is where the examples and docs were foc…

[Aurorawright]

Hello,
I think you can implement a solution using CustomJS callbacks. First, define a CustomJS callback function that manages the tooltip’s visibility based on hover events. This function should be set up to update the tooltip display status to remain visible when clicked. Utilize Bokeh’s tools such as HoverTool to customize the tooltip behavior and ensure it remains visible upon interaction. Ensure your Bokeh plot settings and JavaScript callbacks are synchronized to maintain smooth functionality throughout the user experience.