使用 Dash 向引导表中的单元格添加工具提示答案

【问题标题】：Adding a tooltip to a cell in a Bootstrap Table using Dash使用 Dash 向引导表中的单元格添加工具提示
【发布时间】：2019-06-14 14:48:57
【问题描述】：

我正在使用 Dash 构建应用程序，并且应用程序的一部分正在显示数据表。我使用来自dash-bootstrap-components 的Table() 函数将表从pandas 数据帧转换为Dash 中的引导表。

我的桌子设置好了

import dash-bootstrap-components as dbc
import dash_html_components as html
import dash

data_table = dbc.Table(# code to construct table)

我想使用dbc.Tooltip 为我的data_table 中的项目（html.td() 元素）添加工具提示。我的第一个想法是为表格中的每个元素分配一个与其位置相对应的id，然后附加一个工具提示

tooltip = dbc.Tooltip("Tooltip text", target = id)

然后我们把它们放在一起。

app = dash.Dash(_name_)
app.layout = html.Div(
                 children = [data_table, tooltip]
             )

但是，这似乎不起作用，我正在努力从理论上实现这一点并且找不到太多帮助。

更新：

这是我正在尝试做的一些示例代码。它会给出一个错误，如果您删除分段注释“REMOVE TO WORK”，代码将起作用。

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import pandas as pd


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

data = {
            "Name" : ["Tom", "Jack", "Jill", "Jane"],
            "Age"  : [21, 30, 45, 80]
        }
fixt_df = pd.DataFrame.from_dict(data)

#Setup table
table = dbc.Table(
            # Header
            [html.Thead([html.Tr([html.Th(col) for col in fixt_df.columns])])] +

            # Body
            [html.Tbody([html.Tr([html.Td(html.A(fixt_df.iloc[i][col], id = ""+str(i)+"_" + col))
                for col in fixt_df.columns])
                for i in range(len(fixt_df))])]
            ,
            hover = True,
            className = "table-responsive table-hover"
        )

items = [table]
# REMOVE TO WORK
for col in fixt_df.columns:
    for i in range(len(fixt_df)):
        items.extend([dbc.Tooltip("test", target = str(i)+"_"+col)])
# REMOVE TO WORK
app.layout = html.Div(
                children = [
                    #header
                    html.Div(
                        html.H1("Example")
                    ),
                    #table
                    html.Div(
                        items
                    )
                ]
            )

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

【问题讨论】：

请创建一个演示表（包含虚假数据），以便我可以通过复制粘贴来运行您的代码。
@Shovalt 我已经用一些可以复制粘贴的代码更新了问题。
你看到答案了吗？它解决了你的问题吗？
或者，考虑使用 plotly 的数据表模块，它允许使用工具提示。

标签： python bootstrap-4 bootstrap-table plotly-dash twitter-bootstrap-tooltip

【解决方案1】：

我发现了您的问题 - 出于某种原因，dbc.Tooltip 元素不能很好地与 ID 以数字开头的元素配合使用。

要克服这个问题，只需更改元素 ID 和工具提示目标即可：

str(i)+"_"+col

到：

col+"_"+str(i)

或者，您可以添加字母前缀：

"p_"+str(i)+"_"+col

【讨论】：