python - HoverTool 的背景

标签 python html css background bokeh

我使用的示例来自 Bokeh 文档页面,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://docs.bokeh.org/static/snake.jpg',
                'http://docs.bokeh.org/static/snake2.png',
                'http://docs.bokeh.org/static/snake3D.png',
                'http://docs.bokeh.org/static/snake4_TheRevenge.png',
                'http://docs.bokeh.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)

根据这段代码,如何让HoverTool的背景变成特定的颜色,目前只能分别调整图片和文字的颜色。

最佳答案

快速搜索后,我找到了从工具提示本身覆盖 .bk-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://docs.bokeh.org/static/snake.jpg',
               'http://docs.bokeh.org/static/snake2.png',
               'http://docs.bokeh.org/static/snake3D.png',
               'http://docs.bokeh.org/static/snake4_TheRevenge.png',
               'http://docs.bokeh.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)

关于python - HoverTool 的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41827991/

相关文章:

python - seaborn 联合图中的附加关键字参数

css - 以可读的方式呈现长链接列表 HTML

html - 在 Outlook.com 中禁用 HTML 邮件的文本大小调整

css - 垂直居中一个 block 在另一个 block 的底线之上

python - 使用 easy_install 或 setup.py install 在 OSX 上安装 Python 模块

python - 导入错误 : cannot import name wraps on Mac

python - OpenCV Python : How to detect if a window is closed?

javascript - 预加载图像,(javascript 中的源代码)

html - li 中跨度的中心背景图像,文本居中并在底部垂直对齐

html - 更改复选框标签 css 属性并选中复选框