Tooltips#

Bokeh supports tooltips on a wide range of UI elements, such as plots or widgets. You can use tooltips to attach additional information to almost any part of your visualization.

Note

A special case of a tooltip are the tooltips displayed by the HoverTool. Use the hover tool in case you want to display tooltips on hover over certain areas of a plot. This tool uses Bokeh’s generic tooltip object behind the scenes, but contains many additional, topics features. For more information about configuring a tooltip on a plot with the HoverTool, see the Basic Tooltips section for more information.

The Tooltip object#

Bokeh uses the Tooltip model to manage tooltips. The Tooltip object has several properties to customize the behavior and appearance of tooltips. See Tooltip in the reference guide for additional information.

Tooltip contents#

The content of a Tooltip is defined with its content property.

This content either can be either a plaintext string or an HTML object:

from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import TextInput, Tooltip
from bokeh.models.dom import HTML

plaintext_tooltip = Tooltip(content="plain text tooltip", position="right")
html_tooltip = Tooltip(content=HTML("<b>HTML</b> tooltip"), position="right")

input_with_plaintext_tooltip = TextInput(value="default", title="Label:", description=plaintext_tooltip)
input_with_html_tooltip = TextInput(value="default", title="Label2:", description=html_tooltip)

show(column(input_with_plaintext_tooltip, input_with_html_tooltip))

Hover over or tap the “?” Symbol next to the inputs’ titles to see the tooltips in action.

Note

Currently, the Tooltip object requires at minimum the content and position properties to be set. The tooltip will not be rendered if either of those two properties does not have a value assigned to it.

UI elements supporting tooltips#

Several of Bokeh’s objects have built-in support for tooltips.

Input widgets#

All descendants of the InputWidget base class have built-in support for tooltips. These inputs have a description property that takes a Tooltip object as its value. The tooltips defined by the description property are displayed when a user hovers or taps the “?” symbol next to the input widget’s title:

from bokeh.io import show
from bokeh.models import MultiChoice, Tooltip

OPTIONS = ["apple", "mango", "banana", "tomato"]

tooltip = Tooltip(content="Choose any number of the items", position="right")

multi_choice = MultiChoice(value=OPTIONS[:2], options=OPTIONS, title="Choose values:", description=tooltip)

show(multi_choice)

Note

Since the description tooltip is tied to the input widget’s title, this only works if the widget’s title parameter has a value. If the widget has no title, the tooltip defined with the description parameter will not be displayed.

Currently, the following input widgets support tooltips directly:

Tip

A single instance of Tooltip should only be used once. If two widgets reference the same instance of a Tooltip, only the first one will be displayed:

from bokeh.models import Tooltip, AutocompleteInput, ColorPicker
from bokeh.layouts import column
from bokeh.io import show

tooltip=Tooltip(content="Enter a value", position="right")
input_widgets = [
    AutocompleteInput(value="AutocompleteInput", title="Choose value:", description=tooltip),  # tooltip displayed here
    ColorPicker(color="red", title="Choose color:", description=tooltip),  # no tooltip displayed here
]
show(column(input_widgets))

Instead, make sure to use a different instance of Tooltip for each widget.

HelpButton#

If you want to add a tooltip with additional information to an UI element that doesn’t have built-in support for tooltips, you can use the HelpButton. This widget adds a button with a “?” symbol. When the button is clicked or hovered over, the Tooltip object passed to the HelpButton’s tooltip property is displayed.

from bokeh.io import show
from bokeh.layouts import row
from bokeh.models import HelpButton, RadioButtonGroup, Tooltip

LABELS = ["Option 1", "Option 2", "Option 3"]

radio_button_group = RadioButtonGroup(labels=LABELS, active=0)
tooltip = Tooltip(content=f"Select one of the following options: {', '.join(LABELS)}", position="right")
help_button = HelpButton(tooltip=tooltip)

show(row(radio_button_group, help_button))

See HelpButton for more information.

Adding tooltips to arbitrary UI elements#

In addition to adding tooltips to elements that explicitly support it, you can also add tooltips to arbitrary UI element.

Use the target property of a Tooltip object to link this tooltip to an UI element. You have two options to identify an UI element to the target property:

  • an instance of any Bokeh model

  • an instance of one of the selectors models representing a CSS selector for the element you want to attach the tooltip to

After defining your Tooltip object and specifying the target, you need to add the tooltip to the document.

Other UI elements#

Bokeh also supports additional UI elements that you can use to add more information to a Bokeh document. For example, the Dialog model allows you to define a dialog overlay, while the Menu model allows you to define a custom context menu.

See examples/models/widgets.py for examples of these UI elements.