Search code examples
pythonhtmlbokeh

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

I have a horizontal bar plot where in I wanna display the country flag for each bar and some statistics below the country when hovered over it. I'm using Bokeh python library for it.

While it works, however, when trying to hover over the first bar, half of the tooltip hids behind the top of the browser window like below and so is the case for 10% of the second bar. Some part of the Australian flag gets hid as well.

I wanna know if there's a way to put these two tooltips below the cursor?

My Horizontal Bar plot in Bokeh

Below is my code for setting up the tooltip

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)
Solution

  • You can set the attachment property of the hover tool to "vertical". Then the tooltip will attach to the cursor at the top/bottom rather than the sides (and flip automatically depending on cursor position)