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.
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.