Tooltips (original) (raw)

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 theHoverTool. 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 theBasic Tooltips section for more information.

The Tooltip object#

Bokeh uses the Tooltip model to manage tooltips. TheTooltip object has several properties to customize the behavior and appearance of tooltips. See Tooltip in thereference 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("HTML 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 andposition 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:

• AutocompleteInput
• ColorPicker
• DatePicker
• DateRangePicker
• MultipleDatePicker
• DatetimeRangePicker
• MultipleDatetimePicker
• FileInput
• MultiChoice
• MultiSelect
• NumericInput
• PasswordInput
• Select
• Spinner
• TextAreaInput
• TextInput
• TimePicker

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 theHelpButton. This widget adds a button with a “?” symbol. When the button is clicked or hovered over, theTooltip 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 targetproperty:

• 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, theDialog 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.