Dash框架中dbc Tooltip与目标元素对齐异常问题咨询

问题描述 #

使用dash-bootstrap-components的Tooltip组件时，在同一dbc.Row中添加多个Tooltip，所有Tooltip都会弹出在页面最左侧位置，多数情况下与目标元素位置偏差极大，偶尔正常但很快恢复异常；替换图标为按钮后问题依旧。

截图显示：Tooltip弹出在页面最左侧区域，与目标的信息图标位置偏差明显。

环境信息 #

• Python版本：3.9.13
• 依赖包版本：

dash==2.6.0
dash-bootstrap-components==1.2.0
dash-bootstrap-templates==1.0.8
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-table==5.0.0
dash-table-experiments==0.6.0

可复现代码 #

import dash
import dash_bootstrap_components as dbc
from dash import html

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP])

#p2_icon = html.I(className="fa fa-info-circle fa-1x", id="info-icon")
p2_icon = html.I(className="bi bi-info-circle me-2", id="info-icon")
p2_info_tooltip = dbc.Tooltip("Tool tip", target="info-icon")

app.layout = html.Div([
    html.H1("My Dash App"),
    dbc.Row([
       dbc.Col([], width="1"),
        dbc.Col([],width="1"),
        dbc.Col([
            p2_icon,
            p2_info_tooltip,
        ]),
    ]),
])

if __name__ == '__main__':
    app.run_server(debug=True)

问题原因与解决方案 #

这个问题并非操作错误，而是dash-bootstrap-components 1.2.0版本的已知兼容性问题——该版本的Tooltip组件在配合Dash 2.x版本使用时，位置计算逻辑存在缺陷，导致无法正确定位到目标元素。

解决方法如下：

1. 升级dash-bootstrap-components版本：将dash-bootstrap-components升级到2.0.0及以上的稳定版，新版本修复了Tooltip的定位逻辑，适配Dash 2.x的布局规则。
   • 执行升级命令：

     pip install --upgrade dash-bootstrap-components
     

2. 调整Tooltip挂载位置：如果暂时无法升级包，可以将Tooltip组件移至页面根容器下（而非目标元素所在的Col内部），确保Tooltip能获取全局布局信息来计算位置。修改后的布局示例：

   app.layout = html.Div([
       html.H1("My Dash App"),
       dbc.Row([
           dbc.Col([], width="1"),
           dbc.Col([],width="1"),
           dbc.Col([
               p2_icon,
           ]),
       ]),
       p2_info_tooltip  # 将Tooltip移到根容器下
   ])
   

效果验证 #

升级包或调整挂载位置后，Tooltip将正确弹出在目标元素的对应位置，不会再出现偏移到最左侧的问题。

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