In this lesson you will add hover actions to your last visualization. For this you’ll employ Bokeh’s HoverTool() to show a tooltip when the cursor crosses paths with a glyph.

To further explore the capabilities of the HoverTool(), see the HoverTool guide.

File: ThreePointAttVsPctHover.py

Python
      
    
# Bokeh Libraries
from bokeh.plotting import figure, show
from bokeh.io import output_file
from bokeh.models import ColumnDataSource, NumeralTickFormatter, HoverTool

# Import the data
from read_nba_data import three_takers

# Output to file
output_file('three_point_att_vs_pct.html',
            title='Three-Point Attempts vs. Percentage')

# Store the data in a ColumnDataSource
three_takers_cds = ColumnDataSource(three_takers)

#Specify the selection tools to be made available
select_tools = ['box_select', 'lasso_select', 'poly_select', 'tap', 'reset']

# Format the tooltip
tooltips = [
            ('Player', '@name'),
            ('Three-Pointers Made', '@play3PM'),
            ('Three-Pointers Attempted', '@play3PA'),
            ('Three-Point Percentage', '@pct3PM{00.0%}')   
           ]

# Create the figure
fig = figure(plot_height=400,
             plot_width=600,
             x_axis_label='Three-Point Shots Attempted',
             y_axis_label='Percentage Made',
             title='3PT Shots Attempted vs. Percentage Made (min. 100 3PA), 2017-18',
             toolbar_location='below',
             tools=select_tools)

# Format the y-axis tick label as percentages
fig.yaxis[0].formatter = NumeralTickFormatter(format='00.0%')

# Add square representing each player
fig.square(x='play3PA',
           y='pct3PM',
           source=three_takers_cds,
           color='royalblue',
           selection_color='deepskyblue',
           nonselection_color='lightgray',
           nonselection_alpha=0.3)

# Add the HoverTool to the figure
fig.add_tools(HoverTool(tooltips=tooltips))

# Visualize
show(fig)

00:00 So, what if you’d like to see a little more information about the glyphs that you’ve selected? You can do that by adding hover actions using Bokeh’s HoverTool. You’ll add this functionality to the script you just completed, the ThreePointAttVsPct.py. Make a copy

00:17 and rename it with the word Hover at the end, so ThreePointAttVsPctHover.py.

00:24 What needs to be added? You’re going to add another thing from the models, so at the end of from bokeh.models import you’re going to add the HoverTool. Okay.

00:36 You need to create a list of the tools that you want in your formatter here, so like the select tools that you had earlier, I’m going to have you add all this information near the bottom.

00:48 Actually, no. I’m going to have you add it after selecting the tools, I’ll have you create a list of the things that you want in your tooltips. Create a variable tooltips. And in it, you’re going to make a list of tuples.

01:04 First will be 'Player' and then use the at symbol ('@') and then the column name that you’re pulling the data from. The first part is a label. In this case, the three-pointers that were made, that data is '@play3PM', three-pointers made. Next, 'Three-Pointers Attempted'.

01:25 That would be '@play3PA', three-pointers attempted. And last is the percentage that you created, '@pct3PM'. And then you can add in curly braces the style of formatting you’d like for a number. In this case, it’s a percentage. Close off the curly braces.

01:44 So, what you’ll see side-by-side then is the player’s name, the three-pointers made, attempted, and the percentage. Great, okay. So that’s formatting all the information that will be in the tooltips.

01:55 How do you actually add the tooltip? That’s done by adding the HoverTool to the figure. So fig.add_tools() and then inside the arguments, you’ll say HoverTool().

02:07 And then its argument is going to be tooltips=tooltips, the list that you made just a second ago with the tuples. Oh, sorry. This needs to go at the bottom, so I’m going to cut this from here because the figure has to be created first, then right before showing the visualization, that’s where this information for the HoverTool needs to be added to the figure.

02:31 So, fig.add_tools(HoverTool(tooltips=tooltips)). And now if you save, you can run the script down here in the terminal.

02:42 Okay. Let’s see what you get.

02:46 So here in your toolbar is the hover tool. It’s currently active, as you can see. And if I hover over a particular one, it’ll say, “Okay, this is Joshua Jackson, and the Percentage is 26.3.” And up here at the top we’ve got Darren Collison,

03:07 which is very cool.

03:13 To turn the feature off, you can click on it and then you’ll see the crosshairs disappear. Now that you know how to add the HoverTool, in the next video, I’ll show you how to enhance it.

andresgtn on April 2, 2020

would be nice to have like a 3 second delay before switching automatically to the next lesson and allow you to pause it to stay in the current page, like in youtube. The reason for it is that after watching the video, i like to scroll down the page to view the code and type it myself. Its annoying now to be sent to the next video and always have to go and click back.

Chris Bailey RP Team on April 2, 2020

Hi @andresgtn, I understand wanting more control. There is a way to stop the autoplay in your account settings.

From there you can turn it on or off, and control speed of playback. I agree that it is really useful to type in the code yourself. I hope this helps.

Become a Member to join the conversation.

Adding Hover Actions