user7332583 user7332583 - 1 year ago 76
Python Question

Background of HoverTool

The example I'm using comes from the Bokeh documentation page, Configuring Plot Tools.

from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import HoverTool

output_file("toolbar.html")

source = ColumnDataSource(
data=dict(
x=[1, 2, 3, 4, 5],
y=[2, 5, 8, 2, 7],
desc=['A', 'b', 'C', 'd', 'E'],
imgs = [
'http://bokeh.pydata.org/static/snake.jpg',
'http://bokeh.pydata.org/static/snake2.png',
'http://bokeh.pydata.org/static/snake3D.png',
'http://bokeh.pydata.org/static/snake4_TheRevenge.png',
'http://bokeh.pydata.org/static/snakebite.jpg'
],
fonts=['<i>italics</i>',
'<pre>pre</pre>',
'<b>bold</b>',
'<small>small</small>',
'<del>del</del>'
]
)
)

hover = HoverTool(
tooltips="""
<div>
<div>
<img
src="@imgs" height="42" alt="@imgs" width="42"
style="float: left; margin: 0px 15px 15px 0px;"
border="2"
></img>
</div>
<div>
<span style="font-size: 17px; font-weight: bold;">@desc</span>
<span style="font-size: 15px; color: #966;">[$index]</span>
</div>
<div>
<span>@fonts{safe}</span>
</div>
<div>
<span style="font-size: 15px;">Location</span>
<span style="font-size: 10px; color: #696;">($x, $y)</span>
</div>
</div>
"""
)

p = figure(plot_width=400, plot_height=400, tools=[hover],
title="Mouse over the dots")

p.circle('x', 'y', size=20, source=source)

show(p)


Given this code, how do I make the background of the HoverTool a specific color, right now I can only adjust the colors of the images and text separately.

Answer Source

There are two ways to do this an easy way where you can just style the div that you make inside the tooltip;

from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import HoverTool

output_file("toolbar.html")
source = ColumnDataSource(
        data=dict(
            x=[1, 2, 3, 4, 5],
            y=[2, 5, 8, 2, 7],
            desc=['A', 'b', 'C', 'd', 'E'],
            imgs = [
                'http://bokeh.pydata.org/static/snake.jpg',
                'http://bokeh.pydata.org/static/snake2.png',
                'http://bokeh.pydata.org/static/snake3D.png',
                'http://bokeh.pydata.org/static/snake4_TheRevenge.png',
                'http://bokeh.pydata.org/static/snakebite.jpg'
            ],
            fonts=['<i>italics</i>',
                   '<pre>pre</pre>',
                   '<b>bold</b>',
                   '<small>small</small>',
                   '<del>del</del>'
                   ]
        )
    )
# ADDING STYLES TO THE FIRST DIV TAG
hover = HoverTool(
        tooltips="""
        <div style="background:red;">
            <div>
                <img
                    src="@imgs" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
            <div>
                <span style="font-size: 17px; font-weight: bold;">@desc</span>
                <span style="font-size: 15px; color: #966;">[$index]</span>
            </div>
            <div>
                <span>@fonts{safe}</span>
            </div>
            <div>
                <span style="font-size: 15px;">Location</span>
                <span style="font-size: 10px; color: #696;">($x, $y)</span>
            </div>
        </div>
        """
    )

p = figure(plot_width=400, plot_height=400, tools=[hover],
           title="Mouse over the dots")

p.circle('x', 'y', size=20, source=source)

show(p)

The drawback is that the tooltip has an annoying white border around it. Of course you could add more styles to the first div tag like padding and round corners with bow-shadow to make it look a little better but if you do it the easy way you will always have the white borders (Unless there is someway to override the builtin css that I'm not aware of). Anyways here is the more difficult way to do it:

  1. Clone or download the bokeh repo from github.
  2. Navigate to the file bokehjs\src\less\tooltips.less
  3. Modify the less file by changing @tooltipColor ect.
  4. Build bokehjs from scratch as described in the bokeh developer's guide.
  5. Reinstall bokeh from the parent directory python setup.py install. This is also described in the developer's guide.

UPDATE:

THE EASY WAY WITHOUT TERRIBLE WHITE BORDER: After doing a quick search I found the way to override the .bk-tooltip style from the tooltip itself.

from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import HoverTool

output_file("toolbar.html")
source = ColumnDataSource(
        data=dict(
            x=[1, 2, 3, 4, 5],
            y=[2, 5, 8, 2, 7],
            desc=['A', 'b', 'C', 'd', 'E'],
            imgs = [
                'http://bokeh.pydata.org/static/snake.jpg',
                'http://bokeh.pydata.org/static/snake2.png',
                'http://bokeh.pydata.org/static/snake3D.png',
                'http://bokeh.pydata.org/static/snake4_TheRevenge.png',
                'http://bokeh.pydata.org/static/snakebite.jpg'
            ],
            fonts=['<i>italics</i>',
                   '<pre>pre</pre>',
                   '<b>bold</b>',
                   '<small>small</small>',
                   '<del>del</del>'
                   ]
        )
    )

hover = HoverTool(
        tooltips="""
        <HTML>
        <HEAD>
        <style>
        .bk-tooltip {
            background-color: red !important;
            }
        </style>
        </HEAD>
        <BODY>
        <div>
            <div>
                <img
                    src="@imgs" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
            <div>
                <span style="font-size: 17px; font-weight: bold;">@desc</span>
                <span style="font-size: 15px; color: #966;">[$index]</span>
            </div>
            <div>
                <span>@fonts{safe}</span>
            </div>
            <div>
                <span style="font-size: 15px;">Location</span>
                <span style="font-size: 10px; color: #696;">($x, $y)</span>
            </div>
        </div>
        </BODY>
        </HTML>
        """
    )

p = figure(plot_width=400, plot_height=400, tools=[hover],
           title="Mouse over the dots")

p.circle('x', 'y', size=20, source=source)

show(p)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download