Custom image hover tooltips

Showcase
,
1

Just wanted to share how to create image hover tooltips in holoviews based off Configuring plot tools — Bokeh 2.3.3 Documentation

TOOLTIPS = """
    <div>
        <div>
            <img
                src="@imgs" height="150" alt="@imgs" width="150"
                style="float: center; margin: 0px 0px 0px 0px;"
                border="2"
            ></img>
        </div>
        <div>
            <span style="font-size: 10px; color: #696;">(@x, @y)</span>
        </div>
    </div>
"""

import holoviews as hv
from bokeh.models import HoverTool
hv.extension("bokeh")

data = 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'
    ]
)
hover_tool = HoverTool(tooltips=TOOLTIPS)
hv.Points(data, ["x", "y"], ["desc", "imgs"]).opts(tools=[hover_tool])

image

5 Likes
2

Thanks for sharing that :slight_smile:

I guess you meant alt="@desc"?

1 Like
3

Ah yeah although either one is fine