Extra example for Tooltip on disabled items?

[gkruiger]

Hi there,

I wanted to have a Tooltip on a disabled Menu.Item, explaining the user why it was disabled.
Finally found out this can be done by manually setting the opened attribute.
I think it might be helpful to include an example for this in the documentation.
If you agree, I'd be happy to open a PR with a proposal.

Regards,

Gertjan

[rtivital]

The logic is the same for all buttons – https://mantine.dev/core/button/#disabled-button-with-tooltip
Currently, there is a code freeze until the 7.0 release, you are welcome to submit a PR with documentation after v7 is out (in about a couple of months)

[jacobwilson41]

hey @rtivital, I'm not figuring out how to conditionally show a Tooltip using its disabled prop with a Menu.Item.

I tried following the instructions in the link above by replacing the disabled prop with a data-disabled prop on the Menu.Item and it didn't fix the problem for me.

The problem is that the Tooltip is not rendering even when disabled={false}

Is there any update on how to show a Tooltip with a disabled Menu.Item?

return (
    <Tooltip
      label={tooltipLabel}
      disabled={!isKeyField && !isLinkedRecordsFieldWithLinkedRecords} // not rendering even when false
      // data-disabled={!isKeyField && !isLinkedRecordsFieldWithLinkedRecords}
    >
      <Menu.Item
        // data-disabled={isKeyField || isLinkedRecordsFieldWithLinkedRecords}
        disabled={isKeyField || isLinkedRecordsFieldWithLinkedRecords}
        leftSection={<AirtableIcon id="EyeSlash" />}
        onClick={() => {
          dispatch(hideField({ fieldId: field.id, recordId: record.id }));
        }}
      >
        Hide field
      </Menu.Item>
    </Tooltip>