# HoverTool styling background bokeh 3.5

**URL:** <https://discourse.bokeh.org/t/hovertool-styling-background-bokeh-3-5/12046>\
**Category:** Community Support\
**Tags:** hover\
**Created:** [October 18, 2024, 9:49pm UTC](https://discourse.bokeh.org/t/hovertool-styling-background-bokeh-3-5/12046 "2024-10-18T21:49:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![matterda](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/matterda/32/6963_2.png) [@matterda](https://discourse.bokeh.org/u/matterda)\
**Post date:** [October 18, 2024, 9:49pm UTC](https://discourse.bokeh.org/t/hovertool-styling-background-bokeh-3-5/12046/1 "2024-10-18T21:49:28Z")

</div>

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

```auto
    <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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [October 18, 2024, 10:04pm UTC](https://discourse.bokeh.org/t/hovertool-styling-background-bokeh-3-5/12046/2 "2024-10-18T22:04:34Z")

</div>

Please refer to: [Styling DOM elements — Bokeh 3.6.0 Documentation](https://docs.bokeh.org/en/latest/docs/user_guide/styling/dom.html)

---

<div class="post-metadata">

**Author:** ![matterda](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/matterda/32/6963_2.png) [@matterda](https://discourse.bokeh.org/u/matterda)\
**Post date:** [October 19, 2024, 7:33am UTC](https://discourse.bokeh.org/t/hovertool-styling-background-bokeh-3-5/12046/3 "2024-10-19T07:33:44Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![matterda](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/matterda/32/6963_2.png) [@matterda](https://discourse.bokeh.org/u/matterda)\
**Post date:** [October 19, 2024, 1:17pm UTC](https://discourse.bokeh.org/t/hovertool-styling-background-bokeh-3-5/12046/4 "2024-10-19T13:17:16Z")

</div>

(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:

```auto
<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):

```auto
<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?

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [January 17, 2025, 1:18pm UTC](https://discourse.bokeh.org/t/hovertool-styling-background-bokeh-3-5/12046/5 "2025-01-17T13:18:08Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.