With Bokeh, how to hide the icon of a tool while keeping it enabled?

Question

Some context, I have multiple p.line() plots in a single figure. Each line plot has its own hover tool as per this question. I don't find it appealing though, to have each hover tool its own icon:

.

So I thought about keeping the multiple Hover tools but hiding them from the user. What are my options?

Thanks in advance.

Tony · Answer 1 · 2019-10-30T10:17:17.050

First, I would ask myself if a user would like a hidden hover that can't be disabled? So first option I would suggest is adding a tooltips not to each renderer but to the figure which creates a single HoverTool icon that applies to all lines in the plot like this: (Bokeh v1.3.0)

from bokeh.plotting import figure, show
from bokeh.models import HoverTool, Column, Button, CustomJS
import numpy as np

p = figure(toolbar_location='above', 
           tooltips=[("x", "@x")]
          )
lines = [p.line(np.arange(10), np.random.random(10)) for i in range(3)]

for i in range(len(lines)):
    p.add_tools(HoverTool(tooltips=[("x", "@x")], renderers=[lines[i]]))

# button = Button(label='Hide Hover Icon')
# code = '''  hover_btns = document.getElementsByClassName('bk-tool-icon-hover')
#             for(i=0; i<hover_btns.length; i++)
#                 hover_btns[i].style.display = 'none' '''
# 
# button.callback = CustomJS(code=code)
show(Column(p, 
#             button,
            ))

Then if you really don't want to see any hover icon in your toolbar you could add a JS callback executed on button click that hides all hover icons like this:

from bokeh.plotting import figure, show
from bokeh.models import HoverTool, Column, Button, CustomJS
import numpy as np

p = figure(toolbar_location='above', 
#            tooltips=[("x", "@x")]
          )
lines = [p.line(np.arange(10), np.random.random(10)) for i in range(3)]

for i in range(len(lines)):
    p.add_tools(HoverTool(tooltips=[("x", "@x")], renderers=[lines[i]]))

button = Button(label='Hide Hover Icon')
code = '''  hover_btns = document.getElementsByClassName('bk-tool-icon-hover')
            for(i=0; i<hover_btns.length; i++)
                hover_btns[i].style.display = 'none' '''

button.callback = CustomJS(code=code)
show(Column(p, 
            button,
            ))

But doing so requires a user to click on the button first, so maybe a more elegant way to do this would be to call the JS code already at page load using an approach described here.

With Bokeh, how to hide the icon of a tool while keeping it enabled?

1 Answers1