工具提示

Bokeh 支持在广泛的 UI 元素上显示工具提示，例如图表或小部件。您可以使用工具提示将附加信息附加到可视化的几乎任何部分。

注意

工具提示的一个特殊情况是由 HoverTool 显示的工具提示。如果您希望在悬停在图表的某些区域时显示工具提示，请使用悬停工具。此工具在幕后使用 Bokeh 的通用工具提示对象，但包含许多额外的主题功能。有关使用 HoverTool 在图表上配置工具提示的更多信息，请参阅 基本工具提示 部分以获取更多信息。

工具提示对象

Bokeh 使用 Tooltip 模型来管理工具提示。Tooltip 对象具有多个属性，用于自定义工具提示的行为和外观。有关更多信息，请参阅 Tooltip 在 参考指南 中的内容。

工具提示内容

Tooltip 的内容由其 content 属性定义。

此内容可以是纯文本字符串或HTML对象：

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

将鼠标悬停或点击输入标题旁边的“？”符号，以查看工具提示的实际效果。

注意

目前，Tooltip 对象至少需要设置 content 和 position 属性。如果这两个属性中的任何一个没有赋值，工具提示将不会被渲染。

支持工具提示的UI元素

Bokeh 的多个对象内置了对工具提示的支持。

输入小部件

InputWidget 基类的所有后代都具有内置的工具提示支持。这些输入有一个 description 属性，该属性接受一个 Tooltip 对象作为其值。当用户悬停或点击输入小部件标题旁边的“？”符号时，由 description 属性定义的工具提示将显示出来：

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)

注意

由于description工具提示与输入小部件的标题相关联，因此只有当小部件的title参数有值时，此功能才有效。如果小部件没有标题，则使用description参数定义的工具提示将不会显示。

目前，以下输入小部件直接支持工具提示：

• AutocompleteInput

• ColorPicker

• DatePicker

• DateRangePicker

• MultipleDatePicker

• DatetimeRangePicker

• MultipleDatetimePicker

• FileInput

• MultiChoice

• MultiSelect

• NumericInput

• PasswordInput

• 选择

• Spinner

• TextAreaInput

• TextInput

• TimePicker

提示

Tooltip 的单个实例应该只使用一次。如果两个小部件引用同一个 Tooltip 实例，则只会显示第一个：

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

相反，确保为每个小部件使用不同的Tooltip实例。

帮助按钮

如果你想为一个不支持内置工具提示的UI元素添加带有额外信息的工具提示，你可以使用HelpButton。这个小部件添加了一个带有“？”符号的按钮。当按钮被点击或悬停时，传递给HelpButton的tooltip属性的Tooltip对象将显示出来。

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

有关更多信息，请参见HelpButton。

向任意UI元素添加工具提示

除了向明确支持它的元素添加工具提示外，您还可以向任意UI元素添加工具提示。

使用Tooltip对象的target属性将此工具提示链接到一个UI元素。您有两种选项来识别target属性的UI元素：

• 任何Bokeh模型的实例

• 一个selectors模型的实例，表示您想要附加工具提示的元素的CSS选择器

在定义了您的Tooltip对象并指定了目标之后，您需要将工具提示添加到document中。

其他UI元素

Bokeh 还支持额外的 UI 元素，您可以使用这些元素向 Bokeh 文档添加更多信息。例如，Dialog 模型允许您定义一个对话框覆盖层，而 Menu 模型允许您定义一个自定义上下文菜单。

查看 examples/models/widgets.py 以获取这些用户界面元素的示例。