HoverTool styling background bokeh 3.5

Community Support
1

I would like to have stylized tooltips (specifically, background color) upon hovering on a scatterplot’s points. The plot is rendered in the browser. It’s straightforward to get the tooltips with HoverTool, but I cannot stylize the tooltips the way I wanted. I tried customizing the tooltip by setting the tooltips parameter to something like

    <div class="custom-tooltip">
        <h4 style="margin: 0; color: green;">ciaoooo</h4>
        <div style="color: green;"><strong>Value:</strong>gneee</div>
    </div>
    <div style="background-color: black; padding: 5px; border-radius: 5px;">
        <div>
            <span style="font-size: 12px; font-weight: bold; color: white">@time{{%F %T}}</span>
        </div>
        <div>
            <span style="font-size: 12px; color: white">Value: @value</span>
        </div>
    </div>

Which indeed creates a black box in the tooltip, but the black box is surrounded by the larger “default” white box. It seems no matter what I do, the changes only affect what’s inside the “default” box, not the box itself.

By looking at the bokeh.js file that is loaded in the html, I found that style defaults for the hover tooltip are set there:

r.default = ':host{--tooltip-border:#e5e5e5;--tooltip-color:white; ...

I confirmed that a modified js file with --tooltip-color:black changes the background of the tooltip to black.

Is it possible to change these style parameters upon creation of the plot? I am using bokeh 3.5.2.

2

Please refer to: Styling DOM elements — Bokeh 3.6.0 Documentation

3

Hi, thanks for the reply. I tried with stylesheets, but i couldn’t make it work. I may be doing something wrong, applying the style to the figure? Example:

from bokeh.models import ColumnDataSource, InlineStyleSheet, HoverTool
from bokeh.plotting import figure
from bokeh.io import show

data = {
    'x': [1, 2, 3, 4, 5],
    'y': [6, 7, 2, 4, 5],
}
source = ColumnDataSource(data)
# set the hover style
stylesheet = InlineStyleSheet(css=""":host{tooltip-color:black;}""")
p = figure(height=400, width=400, stylesheets=[stylesheet])

p.scatter(x='x', y='y', source=source)
hover = HoverTool(mode="vline")

p.add_tools(hover)
show(p)

Since I don’t have much experience with CSS, I just mindlessly tried the snipped above with GlobalInlineStyleSheet as well.

4

(I think) I’ve made some progress. By inspecting the page once a tooltip is created (upon hovering on a scatter point) a new element appears:

<div class="bk-Tooltip bk-show-arrow bk-non-interactive bk-right" style="top: 189.698px; left: 102.467px;">

Inside it, one of the <style> contains (cropped for brevity):

<style>:host{--tooltip-border:#e5e5e5;--tooltip-color:white;>

I’ve confirmed that changing the --tooltip-color color from the inspector (with JS paused) changes the color of the tooltip. However, I can’t seem to set it via bokeh’s stylesheets because I think it’s created programmatically by the JS code every time I hover on a point.

I might be wrong, because my knowledge in this area is quite limited.

Any suggestions?