Displaying only one tooltip when using the HoverTool() tool

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 know that this may be old, but now there is a much better way to do this. And by better i mean that this method can be extended to any threshold number (like 4 tooltips). So, the steps:

1. Define a CustomJSHover. In it you can write JS code. Also, you have access to all indices for current hover. In the code, you should set the threshold and delete other indices(will delete local copies). After this you should check if current index can be found in that list. If it is found, return an empty string, else - return a string with word hidden (will be used during html parsing)

    custom_hov = CustomJSHover(code="""
        special_vars.indices = special_vars.indices.slice(0,4)
        if (special_vars.indices.indexOf(special_vars.index) >= 0)
        {
            return " "
        }
        else
        {
            return " hidden "
        }
    """)
   

i)Add a HoverTool too your plot and define a html tooltip + define a formatter.
ii)For the html tooltip, add to main div a variable that will be mapped to our CustomJSHover. Let it be y. In our case, it will look like this <div @y{custom}>. (The {custom} is mandatory for mapped variables) The trick is that since our CustomJSHover will return 'hidden' when index will not be in indices, the entire tooltip will become hidden.

iii)For the formatters, you should add a dict mapping from your var (@y) to CustomJSHover. In our case: formatters={'@y':custom_hov}

figure.add_tools(HoverTool(tooltips=("""  
<div @y{custom}>
    <div>
        <img src='@image' alt='@image' style='float: top; width:128px;height:128px; margin: 5px 5px 5px 5px'/>
    </div>
    <div>
        <span style='font-size: 16px; color: #224499'>Some text</span>
        <span style='font-size: 18px'>@dataFrameText</span>
    </div>
</div>
"""), formatters={'@y':custom_hov}))

That's it. Now, only 4 tooltips will be displayed. You can change 4 to any number

Answer 2

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 3

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 4

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.