How to have mutiple modifier for the tooltips

Community Support
1

I have got a tooltip which contains a field with a custom JS formatter. The js formatter returns a string with html tags (i.e ). I would like to put the modifier “{safe}“ (render HTML instead of escaping it as plain text) and the format of the data.

But so far I did not succeed and I don’t know if it is possible

see example below:

from bokeh.plotting import figure, curdoc, show

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’)

MY_HOVER_JS = “”"

console.log('MY_HOVER_JS: value=' + value + ', format=' + format)

let ret = 'unknown format';

if (format == 'format1') {

    ret = 'format1 with html br tags <br><br>'

}

return ret

“”"

_tooltip = “”"

<div>

    <span style="color: #023858; font-style: italic; font-weight: bold; font-size: 100%">

    Performance Comparison

    </span>

</div>

Test1: <b>@y{safe}</b> <br>

Test2: <b>@y{format1}</b> <br>

Test3: <b>@y{safe}{format1}</b> <br>

Test4: <b>@y{format1}{safe}</b> <br>

“”"

h = HoverTool(

renderers=\[r\],

tooltips=\_tooltip,

formatters={'@x': CustomJSHover(code=MY_HOVER_JS), '@y': CustomJSHover(code=MY_HOVER_JS)}

)

p.add_tools(h)

show(p)

See picture below, where it seems the {save} modifier work or my value format but not both.

image
image361×121 3.3 KB

I am using bokeh 3.8.2.

Please can you advise? thanks

2

To get your preferred output you have to write

Test4: <b>@y{format1} @y{safe}</b> <br>

instead of

Test4: <b>@y{format1}{safe}</b> <br>

.

Here is a screenshot:

grafik
grafik421×108 3.66 KB

Just one additional comment. Using bokeh 3.8.2 suggests to use p.scatter() instead of p.circle(). The p.circle() method is deprecated since version 3.4.0 and will be removed in a future version.

1 Like
3

It is not exactly what I wanted.

The \<br\>tags are still escaped. I know with the example above I could have done in a different way. But in my real example I want to be able to add html tags when formatting the input value.