Custom formatter not working with a hover containing a html tooltip

Hi,
I try to create a customer formatter to be used by a hover tool with a html tooltip. The custom formatter is defined using a CustomJSHover.
The custom field/formatter value is not displayed. The value is displayed if the tooltip is a list of tuples.
In the supplied example, the tooltip is working fine for the green line. The “tip” field for the red line is blank whereas it should show the same value as the green line.

Can you tell me what is missing to get my formatter working for a html tooltip?

example:

from bokeh.models import ColumnDataSource
from bokeh.models import CustomJSHover
from bokeh.models import HoverTool

from bokeh.plotting import figure, show

my_formatter = CustomJSHover(code="""
    console.log('my_formatter: ' + value)
    if (value) {
        return value + ' received'
    }
    else {
        return 'my_formatter'
    }
    """
)


# prepare some data
data = {
    'x': [1, 2, 3, 4, 5],
    'y1': [4, 5, 5, 7, 2],
    'y2': [9, 10, 10, 12, 7],
    'tip': ['tip1', 'tip2', 'tip3', 'tip4', 'tip5'],
}

data_source = ColumnDataSource(data)
# create a plot
p = figure(
    title="Background colors example",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add a renderer
r1 = p.line(x='x', y='y1', line_color="green", line_width=2, source=data_source)
r2 = p.line(x='x', y='y2', line_color="red", line_width=2, source=data_source)

tooltips = [
    ('X', '@x'),
    ('Y', '@y1'),
    ('Tip', '@tip{no_special_format}'),
]

p.add_tools(HoverTool(
    renderers=[r1],
    tooltips=tooltips,
    formatters={
        "@tip": my_formatter,
    },
))


tooltips = """
    X: <b>@{x}{safe}</b> <br>
    Y: <b>@{y2}{safe}</b> <br>
    Tip: <b@tip{no_special_format}</b> <br>
"""

p.add_tools(HoverTool(
    renderers=[r2],
    tooltips=tooltips,
    formatters={
        "@tip": my_formatter,
    },
))


# show the results
show(p)

bokeh info:

Python version        :  3.11.10 | packaged by Anaconda, Inc. | (main, Oct  3 2024, 07:22:26) [MSC v.1929 64 bit (AMD64)]
IPython version       :  (not installed)
Tornado version       :  6.4.1
NumPy version         :  1.26.4
Bokeh version         :  3.6.3
BokehJS static path   :  C:\Users\gilles.faure\AppData\Local\miniconda3\envs\EO_py3.11_truck_simulator\Lib\site-packages\bokeh\server\static
node.js version       :  (not installed)
npm version           :  (not installed)
jupyter_bokeh version :  (not installed)
Operating system      :  Windows-10-10.0.22631-SP0

Seems like a possible bug. Please submit a GitHub Issue with full details.

Thanks Bryan.

Issue request raised: Custom formatter not working with a hover containing a html tooltip · Issue #14432 · bokeh/bokeh

1 Like