如何设置Bokeh中悬浮框的固定宽度并自适应高度？

别担心，新手遇到这类布局问题太正常啦！针对你用Python 3.6.4和Bokeh 0.12.15遇到的Tooltip宽度不一致的问题，其实可以通过自定义HTML模板来固定宽度，同时让高度自动适配内容，具体做法如下：

核心思路 #

Bokeh的HoverTool支持自定义HTML格式的Tooltip内容，我们可以在HTML里给容器设置固定宽度，并开启文本自动换行，这样就能强制所有Tooltip保持统一宽度，高度则会根据文本长度自动调整。

代码示例 #

from bokeh.plotting import figure, show
from bokeh.models import HoverTool
from bokeh.sampledata.iris import flowers

# 创建图表
p = figure(title="Iris Dataset", x_axis_label='Sepal Length', y_axis_label='Sepal Width')

# 添加圆形标记
circles = p.circle(x='sepal_length', y='sepal_width', source=flowers, size=10)

# 自定义Tooltip的HTML模板，固定宽度为200px，文本自动换行
custom_tooltip = """
<div style="width: 200px; max-width: 200px; word-wrap: break-word;">
    <div>
        <span style="font-weight: bold;">品种: </span>
        <span>@species</span>
    </div>
    <div>
        <span style="font-weight: bold;">花瓣长度: </span>
        <span>@petal_length</span>
    </div>
    <div>
        <span style="font-weight: bold;">详细描述: </span>
        <span>这是一朵来自@species品种的鸢尾花，它的花瓣长度为@petal_length，花萼长度为@sepal_length，花萼宽度为@sepal_width。</span>
    </div>
</div>
"""

# 创建HoverTool并关联到圆形标记
hover = HoverTool(renderers=[circles], tooltips=custom_tooltip)
p.add_tools(hover)

# 展示图表
show(p)

关键细节说明 #

• width: 200px：强制Tooltip容器的宽度为200px，你可以根据需求调整这个数值（比如改成250px）
• word-wrap: break-word：让过长的文本自动换行，避免Tooltip横向拉伸
• 模板里的@字段名对应数据源里的列名，你可以替换成自己的实际数据字段

这样设置后，所有的Tooltip都会保持统一宽度，长文本会自动换行，高度也会跟着内容自动调整，完美解决你的问题~

内容的提问来源于stack exchange，提问作者Sunny