Bokeh hover and tap


I tried the Bokeh hover example and the Bokeh tap example separately. That works as expected but have issues with hover when I try to combine them. I.e. be able to hover as well as click to follow the hyperlink.

The hyperlink works if I pass the ‘color’ with the link to url but that means I loose control over color.

The other issue is that only the color value is visible on hover where as the others all dispaly —> ???

It seems that I have not passed the data correctly. Here is my example.

-- coding: utf-8 --

from bokeh.plotting import show

from bokeh.charts import Scatter

from bokeh.models import LabelSet

from bokeh.plotting import output_file

from bokeh.models import ColumnDataSource, OpenURL, TapTool

import pandas as pd

from bokeh.models import HoverTool

import json


rjson = json.loads(’[{“Scatter_Plot”:“3”, “symbol”:“TEST1”, “color”:“website_path_01”, “displayitem”:“ALPHA”, “type”:“OK”}, {“Scatter_Plot”:“5”, “symbol”:“TEST2”, “color”:“website_path_02”, “displayitem”:“BETA”, “type”:“NOK”}]’)

json_orders = json.dumps(rjson)

df = pd.read_json(json_orders)

source = df

p = Scatter(source, x=‘Scatter_Plot’, y=‘displayitem’,marker = ‘square’, height=600, width = 900, toolbar_location=“above”,

title=“Favorites (hover for info, click to follow hyperlink)”, color=‘color’,tools=“hover, tap, pan”, legend=False)

hover =

hover.tooltips=[(“URL”,"@color"), (“symbol”, “@symbol”), (“Scatter_Plot”, “@Scatter_Plot”)]

labels = LabelSet(x=‘Scatter_Plot’, y=‘displayitem’, text=‘type’, level=‘glyph’, x_offset=5, y_offset=5, source=ColumnDataSource(source), render_mode=‘canvas’)

p.xaxis.major_tick_line_color = None # turn off x-axis major ticks

p.xaxis.minor_tick_line_color = None # turn off x-axis minor ticks

p.xaxis.major_label_text_font_size = ‘0pt’ # preferred method for removing tick labels

p.xaxis.axis_label_text_font_style = ‘bold’

p.yaxis.axis_label_text_font_style = ‘bold’

url = “”+ “.htm”

taptool =

taptool.callback = OpenURL(url=url)


p.legend.location = “top_right”


It seems the data is not correctly passed which is also giving the compiler errors

E-1010 (CDSVIEW_SOURCE_DOESNT_MATCH): CDSView used by Glyph renderer must have a source that matches the Glyph renderer’s data source: GlyphRenderer(id=‘8b7cfb30-9077-401c-978c-872854b86b11’, …)

Any hejp is appreciated on resolving the issue :slight_smile:

Thank you.