How to make tooltips update on a select widget

[saiyasaibing]

I am creating a bar chart with a select widget. I added some customjs to make the bar chart plot data based on the value of the select widgets. It’s like:
p.glyph.top.field = select.value
p.glyph.change.emit()

And I am following the same logic to let my bar chart show data labels dynamically on the select widgets update.

However, when I am looking at the hover tool, tooltips is not updating with the select widgets. The tooltips is only showing the values when figure initiated.

My question is that is there a way to get tooltips change to the column of data that select widget pointed to?

Thank you for the help!!!

[Bryan]

@saiyasaibing I don’t really understand either what precisely you are seeing, or what exactly you want to see. I can think if at least a few different interpretations. A Minimal Reproducible Example is always advised to remove ambiguity in the question, and in this case, screengrab images or video would also go a very long way to communicating exactly what is going on.

[gmerritt123]

I’ve succeeded by using a “tooltip dictionary” that will update the tooltip property of the hovertool to look for a different field/set of fields depending on widget state.

Rough example below with comments:

from bokeh.plotting import figure,show
from bokeh.layouts import column
from bokeh.models import CustomJS, HoverTool, Select, ColumnDataSource

f=figure()

#make two different renderers with two different datasources
fruit_src = ColumnDataSource(data={'x':[0,1,2],'y':[1,3,5],'fruit':['orange','apple','banana']})
veg_src = ColumnDataSource(data={'x':[2,3,1],'y':[2,1,4],'veg':['potato','broccoli','spinach']})

fruit_r = f.scatter(x='x',y='y',source=fruit_src,size=15)
veg_r = f.scatter(x='x',y='y',source=veg_src,visible=False,size=15)

#make a tooltip dictionary --> basically maps the select's value property to what you want the tooltips to point to
ttip_dict ={'Fruits':[('Fruit','@fruit')]
            ,'Veggies':[('Veggie','@veg')]}
#make a hovertool instance, initialized to trigger on the fruit renderer and get ttips from the Fruits key of ttip_dict
htool = HoverTool(renderers=[fruit_r],tooltips=ttip_dict['Fruits'])
f.add_tools(htool)
#make the select
sel = Select(value='Fruits',options=['Fruits','Veggies'])

#callback logic --> when the select value is Fruit, update the visibility of the two renderers, and alter the hovertool instance two ways:
    #1) tell it to trigger on the appropriate renderer
    #2) update its tooltips property to look for the appropriate field
cb = CustomJS(args=dict(fruit_r=fruit_r,veg_r=veg_r,sel=sel,htool=htool,ttip_dict=ttip_dict)
                       ,code='''
                       if (sel.value=='Fruits'){
                               fruit_r.visible = true
                               veg_r.visible = false
                               htool.renderers = [fruit_r]
                               htool.tooltips=ttip_dict[sel.value]
                               }
                       else if (sel.value=='Veggies'){
                           fruit_r.visible = false
                           veg_r.visible = true
                           htool.renderers=[veg_r]
                           htool.tooltips=ttip_dict[sel.value]
                           }                       
                       ''')
sel.js_on_change('value',cb)
show(column([f,sel]))

[saiyasaibing]

Hi Bryan,
Apologize for my vague question. I was about to pack up a reproductible example and some screenshots. Then I saw gmerritt123’s post. It is exactly what I was looking for.

I will be more explicit about questions next time.
Appreciate your quick response.

Thanks,
saiyasaibing

[saiyasaibing]

gmerritt123 you are the man. This is exactly what I was looking for. I already implemented it in my code. Works perfectly!