[BUG] dbc.Popup no longer works for table column headers

[dnordfors]

Thank you so much for helping improve the quality of Dash!

We do our best to catch bugs during the release process, but we rely on your help to find the ones that slip through.

Describe your context
Please provide us your environment, so we can easily reproduce the issue.

• replace the result of pip list | grep dash below

dash                          2.6.2
dash-bootstrap-components     1.2.1
dash-core-components          2.0.0
dash-cytoscape                0.3.0
dash-daq                      0.5.0
dash-html-components          2.0.0
dash-table                    5.0.0
dash-vtk                      0.0.9
jupyter-dash                  0.4.2

Describe the bug
I want a dbc.Popup to appear when I move the mouse to the column header. Until recently, this worked - but it stopped working after I upgraded dash and dash-bootstrap-components.

                # Make the popover objects
                def popovr(df,col_nr,content):
                    cols=df.columns
                    ppovr= dbc.Popover(
                                        content,
                                        target=self.id+' th.dash-header.column-{}'.format(col_nr),
                                        trigger='hover',
                                        placement='right',
                                        delay={'show':300,'hide':50}
                                    )
                    return ppovr
                popovers= [
                    popovr( i,
                            # get_tooltip_header_data(cols[i])
                            dcc.Markdown(get_tooltip_header_data(cols[i]))
                    ) for i in range(len(cols))
                ]

The bug was confirmed by a Plotly team member in this thread: https://community.plotly.com/t/re-what-is-the-id-for-a-datatable-column-header/69596
The discussion thread did not find a solution so I am submitting the bug report here.

Expected behavior

A dbc.Popup appears when I move the mouse over a column header. It works like the DataTable column tooltip with richer functionalities.

Screenshots

[Coding-with-Adam]

hi @dnordfors
thank you for opening this issue. The Forum link you posted is for a private message chain, so most people will not be able to access it. Here is the forum link to the same issue. https://community.plotly.com/t/what-is-the-id-for-a-datatable-column-header/69359/4

On another note, would you be able to add a minimal working example code to your issue; a piece of code that our engineers can copy and run the app example locally?

[dnordfors]

Hi @Coding-with-Adam
Thanks for your patience. This issue is still high up on my priority list.

Can your engineers make a demo code snippet for a dbc.Popup targeting a datatable column header, triggered by hover?
With a functioning demo snippet I can rewrite my code.

Sorry, can't provide the minimal working example since I have developed my code in the meanwhile and the new code depends on the new versions of Dash and dash-bootstrap-components.

Sorry about the delay - looking forward to hearing back

[ned2]

@dnordfors, I see that your example involves passing something that looks like a fully specified CSS selector in as the value of the dbc.Popopver target param.

However it looks dbc.Popover (and also dbc.Tooltip) only support DOM IDs being the value of the target param, based on the documentation and also looking at the underlying JavaScript, which does a simple lookup: document.getElementById(target)

I've seen someone else say that targeting specific classes works here. It certainly wouldn't be expected to work now. Perhaps @tcbegley can weigh in on whether this was ever supported with by Dash Bootstrap Components?

[tcbegley]

This was never intentionally supported, it's interesting to know that it did apparently work at some point. Possibly when we updated the Reactstrap dependency it became more flexible.

AFAICT if it ever did work, it won't have worked since v1 was released (October 2021) and we made some major internal changes in order to support Bootstrap 5.

[ned2]

Cheers @tcbegley :)

Unfortunately @dnordfors this isn't a bug that was introduced in either Dash or DBC, but rather some unsupported behaviour that happened to to do what you needed previously but no longer.