Displaying only one tooltip when using the HoverTool() tool
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.
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.