import pandas as pd
import holoviews as hv
hv.extension("bokeh")
This demo demonstrates how to build custom hover tooltips using HTML. The tooltips are displayed when the user hovers over a point in the plot.
df = pd.DataFrame(
dict(
x=[1, 2, 3, 4, 5],
y=[2, 5, 8, 2, 7],
desc=["A", "b", "C", "d", "E"],
imgs=[
"https://docs.bokeh.org/static/snake.jpg",
"https://docs.bokeh.org/static/snake2.png",
"https://docs.bokeh.org/static/snake3D.png",
"https://docs.bokeh.org/static/snake4_TheRevenge.png",
"https://docs.bokeh.org/static/snakebite.jpg",
],
fonts=[
"<i>italics</i>",
"<pre>pre</pre>",
"<b>bold</b>",
"<small>small</small>",
"<del>del</del>",
],
)
)
Having declared the tooltips' columns, we can reference them in the tooltips with @
. Just be sure to pass all the relevant columns as extra vdims
.
TOOLTIPS = """
<div>
$label
<div>
<img
src="@imgs" height="42" alt="@imgs" width="42"
style="float: left; margin: 0px 15px 15px 0px;"
border="2"
></img>
</div>
<div>
<span style="font-size: 17px; font-weight: bold;">@desc</span>
<span style="font-size: 15px; color: #966;">[$index]</span>
</div>
<div>
<span>@fonts{safe}</span>
</div>
<div>
<span style="font-size: 15px;">Location</span>
<span style="font-size: 10px; color: #696;">($x, $y)</span>
</div>
</div>
"""
hv.Scatter(df, kdims=["x"], vdims=["y", "desc", "imgs", "fonts"], label="Pictures").opts(
hover_tooltips=TOOLTIPS, size=20
)