# Bokeh hover and tap

**URL:** <https://discourse.bokeh.org/t/bokeh-hover-and-tap/2649>\
**Category:** Community Support\
**Created:** [December 3, 2017, 9:45am UTC](https://discourse.bokeh.org/t/bokeh-hover-and-tap/2649 "2017-12-03T09:45:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![VT\_Sol](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/v/91b2a8/32.png) [@VT\_Sol](https://discourse.bokeh.org/u/VT_Sol)\
**Post date:** [December 3, 2017, 9:45am UTC](https://discourse.bokeh.org/t/bokeh-hover-and-tap/2649/1 "2017-12-03T09:45:35Z")

</div>

hi,

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

output\_file(“scatter.html”)

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 = p.select(dict(type=HoverTool))

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 = “[https://google.com/@color](https://google.com/@color)”+ “.htm”

taptool = p.select(type=TapTool)

taptool.callback = OpenURL(url=url)

p.add\_layout(labels)

p.legend.location = “top\_right”

show(p)

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 🙂

Thank you.

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [July 21, 2021, 9:13pm UTC](https://discourse.bokeh.org/t/bokeh-hover-and-tap/2649/2 "2021-07-21T21:13:37Z")

</div>