Tooltip Not Working on Dash/Datatable update

Following the Dash Experiment (https://community.plot.ly/t/dash-datatable-tooltips/6327/3) the tooltip works on Dash version 0.39 (Datatable version 3.6.0), but not on 1.0.0+ (Datatable version 4.1.0).

I know that the naming of ‘tooltips’ has been changed in version 1.0.0 (although it’s not very clear whether it should be ‘tooltip’ or ‘tooltip_data’), but both of these don’t seem to work:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as table

import pandas as pd
import textwrap

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

print(dash.__version__)
print(table.__version__)

app = dash.Dash(__name__)
app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

def create_tooltip(cell):
    try:
        num = float(cell)
        return textwrap.dedent(
            '''
            Tooltip for value **{value:+.2f}**.
            | Multiplier | Value |  Percent |
            |-------|-------|---------------|
            | 1     | {value_1:+.2f}     | {value_1:+.2f}% |
            | 2     | {value_2:+.2f}     | {value_2:+.2f}% |
            | 3     | {value_3:+.2f}     | {value_3:+.2f}% |
            '''.format(
                value=num,
                value_1=num,
                value_2=num * 2,
                value_3=num * 3
            )
        )
    except:
        return textwrap.dedent(
            '''
            Tooltip: **{value}**.
            '''.format(value=cell)
        )


app.layout = html.Div([
    table.DataTable(
        columns = [{'name': i, 'id': i} for i in df.columns],
        data=df.to_dict('rows'),
        tooltip={
            col: [
                {
                    'type': 'markdown',
                    'value': create_tooltip(df.loc[i, col])
                }
                for i in range(len(df))
            ]
            for col in df.columns
        }
    )
])

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

I’ve tested the code above (with the term ‘tooltips’ instead of ‘tooltip’) on Dash 0.39 (Datatable version 3.6.0) and it works fine. It doesn’t however on the new version. Reading through the docs, the only change has been on the term ‘tooltips’. Unless I’m doing something horribly wrong, I think this is a bug.

[happyshows]

k finally I got it, you need to wrap the row loop outside of the column id loop (not inside)

tooltip_data=[{
                col: f"{col} {i} th row"
                for col in _df.columns} for i in range(0,_df.shape[0])],

[ybressler]

@vlemmy I’m having similar issues…

The issue is an ambiguity in the documentation’s requirements for providing tooltip_data. Perhaps borrowing from syntax of another programming language, the format is as follows:

• tooltip_data: a list of dictionaries (one for each row) >>
  • keys = column name(s)
  • value:
    • a string for the value to be shown on hover
    • a dictionary:
      • keys = "value", "type", "duration" etc. (according to documentation)
      • values = corresponding values as documented.

As you can see, the overlapping language creates room for error. Also, you have to operate rowwise – which isn’t intuitive.

Here’s an example (in long form):

# an empty list for now
tooltip_data = []

# operate rowwise
for i in range(0,df.shape[0]):
    # each row needs a dictionary
    t_row = {}

    for col in ["col_1", "col_2"]: 
        if col in df.columns:
            # add to the row dict
            x = df[col][i]
            t_row[col] = x
            # Alternatively, the following format would work
            # t_row[col] = {"value" : x }

        # don't include empty rows
        if len(t_row)>0:
            tooltip_data.append(t_row)

Oh, and tooltip_data = tooltip_data should be used in the latest version of plotly.

Hope this solves it for you!