How to limit number of tooltips on overlapping data points in Bokeh? [duplicate]

Question

I am plotting very many points in Bokeh, and I have added the HoverTool to the list of tools of the figure, so that the mouse shows the x,y coordinates of the mouse when close to a glyph.

When the mouse gets close to a set of glyphs closely packed together, I get as many tooltips as glyphs. I want instead only one tooltip, the one of the closest glyph. This isn't just a presentation detail, because for very many points this results:

• in slow interaction with the plot, with the browser getting stuck while all tooltips are generated
• in a very long tooltip, where the same information is repeated as many times as many glyphs are close to the cursor

An example follows, with the code to replicate the behaviour:

import numpy.random
from bokeh.plotting import figure, output_notebook, show
from bokeh.models import HoverTool
output_notebook()

hover = HoverTool()
hover.tooltips = [("(x,y)", "($x, $y)")]

x = numpy.random.randn(500)
y = numpy.random.randn(500)

p = figure(tools=[hover])
p.circle(x,y, color='red', size=14, alpha=0.4)

show(p)

Answer 1

I was having a similar problem and came up with a solution using a custom tooltip. I insert a style tag at the top that only displays the first child div under the .bk-tooltip class, which is the first tooltip.

Here's a working example:

from bokeh.plotting import figure, show
from bokeh.models import HoverTool, Range1d

custom_hover = HoverTool()

custom_hover.tooltips = """
    <style>
        .bk-tooltip>div:not(:first-child) {display:none;}
    </style>

    <b>X: </b> @x <br>
    <b>Y: </b> @y
"""

p = figure(tools=[custom_hover]) #Custom behavior
#p = figure(tools=['hover'])  #Default behavior 

p.circle(x=[0.75,0.75,1.25,1.25], y=[0.75,1.25,0.75,1.25], size=230, color='red', fill_alpha=0.2)
p.y_range = Range1d(0,2)
p.x_range = Range1d(0,2)

show(p)

This is kind of a hacky solution, but it works in Safari, Firefox and Chrome. I think they'll be coming out with a more long-term solution soon.

Answer 2

The posted CSS solutions did not work for me with Bokeh 2.2.2. The following did:

    div.bk-tooltip.bk-right>div.bk>div:not(:first-child) {
        display:none !important;
    }
    div.bk-tooltip.bk-left>div.bk>div:not(:first-child) {
        display:none !important;
    }

Not the most elegant solution but it ended my frustration with 40 tooltips stacking vertically. This was implemented with an embedded chart on a website with custom CSS.

Answer 3

Kudos to pst0101 for an excellent answer, which still works through 2018. Since the devs don't look like they'll be getting to this one any time soon, I thought I'd add a brief note about how to make pst's solution work for basic/standard tooltips, since it took me some trial and error to modify it on my own.

Since code is worth a thousand words, here is a stripped down version of my own:

hoverToolTip = [
        ("Item" + nbs + "Number/s", "@{ItemNumber}"),
        ("Description/s", "@{Description}{safe}"),
        ("Virtual" + nbs + "Item", """@{IsVirtual}
        <style>
            .bk-tooltip>div:not(:first-child) {display:none;}
        </style>""")
]

hover = HoverTool(tooltips=hoverToolTip)

nbs contains a unicode string of a non-breaking space, and {safe} tells bokeh it's safe to render html (specifically, line breaks) from my description field. Irrelevant to the question, but useful since hover has some broken wrapping behaviors with long text that many people will need to deal with.