Ability to add tooltip to Header item

[richpixel]

Is it currently possible to add a tooltip to items in the header? If it isn't possible I was considering injecting a tooltip by locating the item from an id for the item, but I also don't see a way to add a specific id to the element.

Thanks

[twhetzel]

I thought there was a parameter to do this, but haven't come across it again in the docs. I did a very bulky, pure CSS implementation as:

title: <div className="tooltip">Metadata Status
<span className="tooltiptext">Validation status of the template metadata.</span></div>

And then CSS from here: https://www.w3schools.com/css/css_tooltip.asp

I'm looking to find a better way to do this.

[miktap]

Column title property type is actually string | ReactElement (documentation at the moment says it's string only) so you can also override title to use React Tooltip, e.g.:

  import { Tooltip, TableCell } from '@material-ui/core';

  const createHeaderWithTooltip = (title: string, tooltip: string) => {
    return (
      <Tooltip title={tooltip} placement='top'>
        <TableCell>{title}</TableCell>
      </Tooltip>
    );
  };

  const [columns, setColumns] = React.useState<Array<Column<Data>>>([
    { title: createHeaderWithTooltip('Name', 'Name of the data'), field: 'name' },
  ]);

[miktap]

Setting ReactElement as a title does have drawbacks. The title is for example used as a placeholder property for a textfield or currency field when adding/editing a field. And the placeholder property only supports strings.

[jakeleventhal]

Something similar to this could look good

[jakeleventhal]

The tooltip appears to show up in the middle of the table here? I think something may be wrong. Can we reopen this

[mbrn]

Hi @jakeleventhal ,

I will take a look again.

[jakeleventhal]

Also, there should be some sort of indication that the header has a tooltip. Right now, it is not clear until it appears

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[jakeleventhal]

not stale @mbrn

[mbrn]

Problem solved with 1.68.1

[aguessous]

hi
const getTooltip= () => {
return div Hello world /div";

const [columns, setColumns] = useState<any[]>([
{ title: 'my title', field: 'name', tooltip: getTooltip() },
]);