有没有办法在散景中可见的位置显示工具提示？

Question

我有一个水平条形图，我想在其中显示每个条形的国旗和悬停在该国家/地区下方的一些统计数据。我正在为此使用 Bokeh python 库。

虽然它有效，但是，当尝试将鼠标悬停在第一个栏上时，工具提示的一半隐藏在浏览器顶部后面 window 如下所示，第二个栏的 10% 也是如此.澳大利亚国旗的一部分也被隐藏了。

我想知道是否有办法将这两个工具提示放在光标下方？

下面是我设置工具提示的代码

hover = HoverTool(line_policy='interp', point_policy='follow_mouse')

hover.tooltips = """
   
    <div>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
        <center>
        <div>
            <img
                src="@imgs" height="128" alt="@imgs" width="96"
                style="float: center; margin: 0px 15px 15px 0px;"

            ></img>
        </div>
        </center>
        <div">
            <div style="display: table-row";>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; display: table-cell; padding-right: 1em; color: #0af">Country: </span>
                <span style="font-size: 15px; font-family: 'Source Sans Pro',  color: #000;">@y</span>
            </div>
            <div style="display: table-row";>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; display: table-cell; padding-right: 1em; color: #0af">Runs: </span>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; color: #000;">@x{000,000}</span>
            </div>
            <div style="display: table-row";>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; display: table-cell; padding-right: 1em; color: #0af">Total Players: </span>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; color: #000;">@player_count</span>
            </div>
            <div style="display: table-row";>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; display: table-cell; padding-right: 1em; color: #0af">Avg Runs per Player: </span>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; color: #000;">@avg{0.00}</span>
            </div>
            <div style="display: table-row";>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; display: table-cell; padding-right: 1em; color: #0af">Avg Strike Rate: </span>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; color: #000;">@sr</span>
            </div>
            <div style="display: table-row";>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; display: table-cell; padding-right: 1em; color: #0af">Total Boundaries: </span>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; color: #000;">@total_boundaries{0,000}</span>
            </div>
            <div style="display: table-row";>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; display: table-cell; padding-right: 1em; color: #0af">Total Centuries: </span>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; color: #000;">@total_centuries{0,000}</span>
            </div>
            <div style="display: table-row";>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; display: table-cell; padding-right: 1em; color: #0af">Total Half Centuries: </span>
                <span style="font-size: 15px; font-family: 'Source Sans Pro', sans-serif; color: #000;">@total_fifties{0,000}</span>
            </div>
        </div>
    </div>

"""



p = figure(width=800, height=800,  y_range=countries_sor[::-1],
           title="Total Runs by each Country in ODI (Considering all the players who played for more than 5 years)",
           x_axis_label='Total Runs',
           y_axis_label='Countries',
           
          )
p.add_tools(hover)
p.hbar(
    y = "y",
    left=0,
    right="x",
    height=.4,
    source=source,
    fill_alpha=.5
)
p.xaxis.formatter=NumeralTickFormatter(format="000,000")

show(p)

Answer 1

您可以将悬停工具的 attachment 属性设置为 "vertical"。然后工具提示将附加到光标 top/bottom 而不是两侧（并根据光标位置自动翻转）

有没有办法在散景中可见的位置显示工具提示？

Is there a way to display tooltip in a position where its visible in Bokeh?

html

python

bokeh