HTML-div HoverTool tooltip formatting

Community Support
1

Hi,

I have a fairly complex app with data visualizations that update based on user interactions. I am attempting, without success thus far, to efficiently update tooltips efficiently, preferably on the client-side in a bokeh server session.

The included smallish example illustrates the problem I encounter (without any interactive elements to keep the example simple). Basically, the tooltips are specified as a string that implements an HTML div.

Formatters are specified that would ideally apply some transformations/printout-formatting on the associated glyph’s data (x,y) values. There is no error thrown, unless its done silently, but the CustomJSHover codes do not appear to have effect.

Thanks.

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
"""

from bokeh.plotting import figure, curdoc
from bokeh.models import HoverTool, CustomJSHover

p = figure(x_range=(0.0,1.0), y_range=(0.0,1.0))

r = p.circle(x=[1.0/3.0,5.0/9.0],y=[1.0/7.0,5.0/7.0], size=30, fill_color='#000000', line_color='#000000')

_tooltip = """
    <div>
        <span style="color: #023858; font-style: italic; font-weight: bold; font-size: 100%">
        Performance Comparison
        </span>
    </div>
    <div class="container">
        <div class="fixed", style="width: 250px">
            <span style="color: #000000; font-weight: bold; font-size: 133%">
            {:} Algorithm Accuracy<br>
            @ User Operating Point<br>
            </span>
        </div>
        <div class="flex-item"; style="border: 5px solid #000000">
            <span style="color: #023858; font-weight: bold; font-size: 150%">
            &nbsp;
            </span>
        </div>
    </div>
    </div>
    <div style="width: 250px">
        <span style="color: #1F77B4; font-weight: bold">Operating Point:</span>
        <span style="color: #000000">$data_x</span>
    </div>
    <div style="width: 250px">
        <span style="color: #1F77B4; font-weight: bold">Accuracy:</span>
        <span style="color: #000000">$data_y</span>
    </div>"""

js_x = """
    return special_vars.data_x.toFixed(1)
"""
js_y = """
    return (100.0 * special_vars.data_y).toFixed(5)
"""

h = HoverTool(renderers=[r],
              tooltips=_tooltip.format('Baseline'),
              formatters={'$data_x': CustomJSHover(code=js_x), '$data_y': CustomJSHover(code=js_y)})
p.add_tools(h)

curdoc().add_root(p)
2

It may be a bit confusing (it definitely was for me), but formatters are not called if there is no format specified. Try replacing $data_x with $data_x{{0}}, same for y. The double braces instead single ones are needed because you call _tooltip.format and 0 in there doesn’t mean anything - just a dummy format.

3

Thanks!

Is there a way that the argument can a meaningful argument instead of a dummy argument? For example $data_y{{0}} and $data_y{{1}} so that two different formats/transformations could be used simultaneously in different parts of the HTML-div based tooltip. As an example $data_y{{0}} might present a score in #.## decimal format and $data_y{{1}} might present a score in per ##% format?

4

Inside the JS code the format string is available via the format variable that Bokeh sets up.

5

Thanks for the prompt explanation