Html Hover Tooltips

Download this notebook from GitHub (right-click to download).

---

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.

Declare data

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>",
        ],
    )
)

Declare plot

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
)

This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

---

Download this notebook from GitHub (right-click to download).