CODEWITHSUNDEEP
react-data-table-component
sokida
sokida

Reputation: 531

How to show tooltip in react data table component

I'm display a data table using react data table component , I wanted to show tooltip or title, when mouse over doing on a name in headers. https://www.npmjs.com/package/react-data-table-component

Upvotes: 2

Views: 4674

Answers (2)

georgiginaa
georgiginaa

Reputation: 31

I know maybe it is too late but I found a solution now for react-data-table-component Tooltip:

  1. add in DataTable prop:
    onRowMouseEnter={(row, e) => showTooltip(row, e)}
  1. Define states for tootips positions and content/title:
    const [tooltipContent, setTooltipContent] = useState<string | undefined>(
        undefined
      );
    const [tooltipPosition, setTooltipPosition] = useState<{
        top: number;
        left: number;
      }>({ top: 0, left: 0 });
  1. showTooltip and hideTooltip methods:
    const showTooltip = (row: Course, event: React.MouseEvent) => {
            setTooltipContent(
              row.leads.length > 0
                ? "You have leads assigned to this course"
                : "You don't have leads assigned to this course"
            );
            setTooltipPosition({ top: event.clientY, left: event.clientX });
          };
        
    const hideTooltip = () => {
            setTooltipContent(undefined);
          };
  1. Add the component after the DataTable ( I don't like the div but it is necessry for the MUI Tooltip):
    {tooltipContent && (
                    <Tooltip
                      open={!!tooltipContent}
                      title={tooltipContent}
                      onClose={hideTooltip}
                      style={{
                        position: "fixed",
                        top: tooltipPosition.top,
                        left: tooltipPosition.left,
                      }}
                    >
                      <div />
                    </Tooltip>
    )}

Or, if you only want to add it for the a special column ( but this will be visible only when you hover on the text from the column) you can just add in columns configurations:

cell: (row: Course) => (
            <Tooltip title={row.description}>
              <div>{row.description}</div>
            </Tooltip>
          )

Upvotes: 0

free2idol1
free2idol1

Reputation: 320

You can create your own tooltip component or use @tippyjs/react package and then wrap the <Tippy /> component around the element, supplying the tooltip's content as the content prop. Example is as below:

{
        name: (
            <Tippy content="Hello">
                <div>Hello</div>
            </Tippy>
        ),

 }

Ref: https://github.com/atomiks/tippyjs-react

Upvotes: 3

Related Questions