文章/答案/技术大牛

发布

问HoverTool的背景
EN

Stack Overflow用户

提问于 2017-01-24 20:13:54

回答 1查看 1.2K关注 0票数 1

我使用的示例来自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的背景变成一种特定的颜色，现在我只能分别调整图像和文本的颜色。

css

background

bokeh

python

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-24 22:13:11

在进行快速搜索之后，我找到了从工具提示本身覆盖.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)

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41827991

复制

相似问题

问HoverTool的背景
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HoverTool的背景EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HoverTool的背景
EN