Tip: Html table in a tooltip using dash mantine components

Dash Python
1

I was looking for a way to add an easily styled html table to a DataTable tooltip but could not figure out how to do this in vanilla Dash (please let me know if I’m missing something). After playing around with some other dash libraries, I finally hit on a solution using Dash Mantine Components- creating a dmc.Table inside of a dmc.HoverCard:

import dash_mantine_components as dmc
from dash import html

dmc.HoverCard(
    className="hover_card",
    withArrow=True,
    width=300,
    shadow="md",
    position="bottom",
    children=[
        dmc.HoverCardTarget(
            html.Label(label, className="label__header"),
        ),
        dmc.HoverCardDropdown(
            dmc.Table(header + body)
        ),
    ],
),

The table is created using html elements (I used variables in place of the static values):

header = [
 html.Thead(
  html.Tr(
      [
          html.Th("Element Position"),
          html.Th("Element Name"),
          html.Th("Symbol"),
          html.Th("Atomic Mass"),
      ]
  )
)
]

row1 = html.Tr([html.Td("6"), html.Td("Carbon"), html.Td("C"), html.Td("12.011")])
row2 = html.Tr([html.Td("7"), html.Td("Nitrogen"), html.Td("N"), html.Td("14.007")])
row3 = html.Tr([html.Td("39"), html.Td("Yttrium"), html.Td("Y"), html.Td("88.906")])
row4 = html.Tr([html.Td("56"), html.Td("Barium"), html.Td("Ba"), html.Td("137.33")])

edit: Forgot to add one line of code:

body = [html.Tbody([row1, row2, row3, row4, row5])]

The end result is something like this (using my actual data):

1

While dmc allows some styling, I found it easier to style using css.

Hope this helps anyone looking to do the same thing and, as I said above, if there is a way to do this using the dash library, I’d love to hear it.

One caveat: There is a known bug in dmc that can cause a browser to hang when there is not enough space for the HoverCard to render in the browser window (e.g., you set the position to “top” and click on a target that is located at the top of your browser scroll window). One way to mitigate this until it is resolved is to set the HoverCard to position “bottom” and make sure there is always enough of a margin at the bottom of the page. See: DateRangePicker makes application freeze.

5 Likes