Using the native tooltip component of XbyK in a react component.

Although I haven't tried this specific scenario, check out the Kentico Community Portal which shows how to use a custom component in a listing table cell:

• LinkTableCellComponent - client-only React component
• WebPageListingPage - custom listing page referencing the component

The important part is the unfortunately undocumented required naming convention.

• All "table cell" React components must be suffixed with *TableCellComponent
• When referring to these components in your C# page code, you only use the component prefix name. In this case, Link

const LinkTableCellComponent = ({
  label,
  path,
}: LinkTableCellComponentProps): React.JSX.Element => {
  // ...
};

.AddComponentColumn(nameof(ContentItemLanguageMetadataInfo.ContentItemLanguageMetadataDisplayName),
    "@kentico-community/portal-web-admin/Link",
    modelRetriever: WebPageLinkModelRetriever,
    caption: "Name",
    searchable: true,
    minWidth: 25)

For your example, I think you'll need to make a wrapping component which uses the Tooltip as a child.

Adapting my LinkTableCellComponent to use it would look like this:

import React from 'react';
import { Link, Tooltip } from '@kentico/xperience-admin-components';

interface LinkTableCellComponentProps {
  readonly path: string;
  readonly label: string;
}

const LinkTableCellComponent = ({
  label,
  path,
}: LinkTableCellComponentProps): React.JSX.Element => {
  return (
    <Tooltip tooltipText={path}>
      <Link href={path} text={label} />
    </Tooltip>
  );
};