DataTable - tooltip_data ( using Dataframe as both Columns and ToolTips)

Dash Python
1

I have a DataFrame containing the following data

  • “Domain”
  • “Type of Data”
  • “Term Count”
  • “Term(s)”

I want to create a DataTable with the first three columns in the table .

Domain          | Type of Data |  Term Count
------------------------------------
Test Domain     | Address      |  4

When I build the “DataTable” I wan’t the “Term(s)” column to be a “tooltip” (hover over) the “Term Count” DataTable column

List of Terms : [Current Address, Secondary Address, Work Address, Last Address]

Current Code:

dash_table.DataTable(
id=‘type-data’,
columns=[{“name”: ‘Domain’, “id”: ‘Domain’},
{“name”: ‘Type of Data’, “id”: ‘Type of Data’},
{“name”: ‘Domain-Type Count’, “id”: ‘Domain-Type Count’},
{“name”: ‘Term Count’, “id”: ‘Term Count’},
{“name”: ‘IGC Term(s)’, “id”: ‘Term(s)’}
],
data=typeFrame.to_dict(‘records’),
style_table={‘overflowX’: ‘auto’},
style_as_list_view=True,
# style_header / style_data
style_cell={
‘font-family’: ‘cursive’,
‘font-size’: ‘18px’,
‘text-align’: ‘center’
},
tooltip_data=[
{
column: {‘value’: str(value), ‘type’: ‘markdown’}
for column, value in row.items()
} for row in typeFrame.to_dict(‘rows’)
],
filter_action=‘native’,
page_size=10,
)

How to change my code to accomplish this?

Thank you…

2

Here is my completed example/solution. I’m pretty sure there is probably a better way to accomplish this but this works.

import dash
import dash_table
import pandas as pd
import numpy as np

import dash_core_components as dcc
import dash_html_components as html

data = [[“User Domain”,“Address”,“4”,“Home Address,Prior Address, Shipping Address, Work Address”]
,[“User Domain”,“Phone”,“3”,“Home Phone, Work Phone, Cell Phone”]]
df = pd.DataFrame(data,columns = [‘domain’,‘type of data’,‘term count’,‘type terms’])

tipData = [[“Address”,“Home Address,Prior Address, Shipping Address, Work Address”]
,[“Phone”,“Home Phone, Work Phone, Cell Phone”]]
dfTool = pd.DataFrame(tipData,columns = [‘type of data’,‘type terms’])

#tooltip_data=[{‘domain’: ‘this is a test tooltip’ }]

#tooltip_data = [ { c: {‘type’: ‘text’, ‘value’: d} for c, d in row.items()} for row in df.to_dict(‘rows’)]

tooltip_data = [
{ ‘term count’: {‘type’: ‘text’, ‘value’: value[‘type terms’]}}
for index, value in df.iterrows()
]

print(tooltip_data)

BS = “https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”
FONT_AWESOME = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”

app = dash.Dash(name, external_stylesheets=[BS, FONT_AWESOME])

app.layout = html.Div(
dash_table.DataTable(
id=‘table’,
#columns=[{“name”: i, “id”: i} for i in df.columns],
columns=[
{“name”:“Domain”, “id”:“domain”},
{“name”:‘Type of Data’, “id”:‘type of data’},
{“name”:‘Term Count’, “id”:‘term count’}
],
data=df.to_dict(‘records’),
tooltip_data=tooltip_data
), style={‘padding’: 15, ‘width’: ‘99%’}
)
if name == ‘main’:
app.run_server(debug=True)

If anyone has an example using tooltip_conditional, that would be awesome. It seems like a natural use for this scenario but I could not get it to work.

All feedback suggestions are much appreciated…

Hope this helps someone else… :slight_smile: