How to show a tooltip inside a table #312

LauGroupie95 · 2022-07-26T11:59:53Z

LauGroupie95
Jul 26, 2022

Hi @veej and @gabro,
I tried using the tableColumn.textWithIcon to create the following layout (see image), but now I'm not able to add any tooltip associated to the icon. Please, can you help me?

Here's the playroom:
https://playroom.bento.buildo.io/#?code=N4Igxg9gJgpiBcIA8AVAhgIwDYwDoDsACQqNAFzQF5gBtA444eh4yAV3zICcBPeQpkRYMAlpHz8AkuMn4AZhC4BbciIBuMADTNhhMjAAeZfrhABVAMqntQlgF8b9x4QC6d5pCxsl%2BAM7U6Wz1MHABhCC8fADp9IwB1ETIAC2kIfAAKQV0kmDRYLgAZTBgsExBwjm4eax0GNDAwGF9fRTL2Tl4aoOIxNIAFCF9EkTSyrhEAcySyLvsASmc3AgB6AD4CEE0QAHcRKGTfBBoARgAWU4AGNyA

I tried also using a tableColumn.custom but if I use something like
< Inline space... >
< Body size... > content < / Body >
< Tooltip ... / >
< / Inline >
it says that multiple children are not accepted, so maybe that's not the right way to proceed.

Thank you in advance

Answered by gabro

Jul 26, 2022

Hi @LauGroupie95, it's a good point, textWithIcon doesn't currently allow that. We may add it (I'll discuss this with @veej and @Phyele) but in the meantime you can work around this by using a custom column (via tableColumn.custom)

View full answer

gabro · 2022-07-26T16:34:54Z

gabro
Jul 26, 2022
Maintainer

Hi @LauGroupie95, it's a good point, textWithIcon doesn't currently allow that. We may add it (I'll discuss this with @veej and @Phyele) but in the meantime you can work around this by using a custom column (via tableColumn.custom)

5 replies

LauGroupie95 Jul 27, 2022
Author

Ok, at the moment I solved this way, thank you

const trigger: TooltipProps["trigger"] = (ref, props) => (
        <Box ref={ref} {...props} display="inline-block">
            <IconInformative size={12} />
        </Box>
    );

<Table
  data={[
    {
      country: {
        body: "US",
        tooltipContent: "United States",
      },
    },
  ]}
  columns={[
    tableColumn.custom({
      headerLabel: "Country",
      accessor: "country",
      disableSortBy: true,
      width: "fill-available",
      Cell: (p: any) => (
        <Inline space={8} alignY="center">
          <Body size="medium">{p.cell.value.body}</Body>
          <Tooltip content={p.cell.value.tooltipContent} trigger={trigger} />
        </Inline>
      ),
    }),
  ]}
/>

gabro Jul 27, 2022
Maintainer

👍 thats looks good! I'll ping you here if we add tooltip as an optional prop to textWithIcon

gabro Jul 27, 2022
Maintainer

@LauGroupie95 we're adding this in the next release, follow the PR here #316

gabro Jul 27, 2022
Maintainer

Released as 0.12.1

LauGroupie95 Jul 27, 2022
Author

Wonderful, thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to show a tooltip inside a table #312

{{title}}

Replies: 1 comment 5 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to show a tooltip inside a table #312

LauGroupie95 Jul 26, 2022

Replies: 1 comment · 5 replies

gabro Jul 26, 2022 Maintainer

LauGroupie95 Jul 27, 2022 Author

gabro Jul 27, 2022 Maintainer

gabro Jul 27, 2022 Maintainer

gabro Jul 27, 2022 Maintainer

LauGroupie95 Jul 27, 2022 Author

LauGroupie95
Jul 26, 2022

Replies: 1 comment 5 replies

gabro
Jul 26, 2022
Maintainer

LauGroupie95 Jul 27, 2022
Author

gabro Jul 27, 2022
Maintainer

gabro Jul 27, 2022
Maintainer

gabro Jul 27, 2022
Maintainer

LauGroupie95 Jul 27, 2022
Author