Python 使用破折号向引导表中的单元格添加工具提示
我正在使用Dash构建一个应用程序,该应用程序的一部分是显示一个数据表。我使用Python 使用破折号向引导表中的单元格添加工具提示,python,bootstrap-4,bootstrap-table,plotly-dash,twitter-bootstrap-tooltip,Python,Bootstrap 4,Bootstrap Table,Plotly Dash,Twitter Bootstrap Tooltip,我正在使用Dash构建一个应用程序,该应用程序的一部分是显示一个数据表。我使用Dash Bootstrap components中的table()函数,将数据帧中的表转换为Dash中的引导表 我的桌子摆好了 import dash-bootstrap-components as dbc import dash_html_components as html import dash data_table = dbc.Table(# code to construct table) 我想使用db
Dash Bootstrap components
中的table()
函数,将数据帧中的表转换为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
向我的数据表中的项目(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)
我发现了您的问题-由于某种原因,dbc.Tooltip
元素不能很好地处理ID以数字开头的元素
要克服此问题,只需在元素ID和工具提示中更改目标:
str(i)+"_"+col
致:
或者,您可以添加字母前缀:
"p_"+str(i)+"_"+col
请创建一个演示表(带有虚假数据),这样我可以通过复制粘贴来运行您的代码。@Shovalt我已经用一些您可以复制粘贴的代码更新了问题。您看到答案了吗?它解决了你的问题吗?或者,考虑使用PLUTLE的DATABATE模块,允许使用工具提示。
"p_"+str(i)+"_"+col