Add a tooltip only on disabled dropdown item from a dropdownButton (react-bootstrap)

Question

So I have a table with an actions column and I wanted disable a dropdown item based on a reason and show a tooltip message only on that disabled element. Here are the actions and the way I tried to do that but the tooltip is rendered on all buttons from the dropdown and I want to know how to show it only on these actions disabled={unusedBlock > 0 && action.id === 1} const itemActions = [ { title: "Create", icon: <LockIcon />, id: 1 }, { title: "Delete", icon: <DeleteIcon />, id: 2 }, ];

 <DropdownButton
    id="dropdown-menu-align-end"
    alignleft="true"
    size="sm"
    variant="secondary"
    Tooltip="smth"
    drop="left"
    title={<ItemActionIcon />}
    className="item-actions-dropdown display-garnishment-drop-items"
  >
    {itemActions.map((action) => {
      return (
        <OverlayTrigger overlay={<Tooltip id="tooltip-disabled">SOMETHING!</Tooltip>}>
         <span className="d-inline-block">
        <Dropdown.Item
          key={action.title}
          disabled={unusedBlock > 0 && action.id === 1}
          onClick={(e) => handleOnClick(e, action.id)}
        >
          <div className="custom-dropdown-item">
            <span className="custom-svg">{action.icon}</span>
            <span>{action.title}</span>
          </div>
        </Dropdown.Item>
         </span>
        </OverlayTrigger> 
      );
    })}
  </DropdownButton>

For buttons and tooltip I used { Dropdown, DropdownButton, OverlayTrigger, Tooltip } from "react-bootstrap" and sorry for this question but I'm still a beginner.

Answer 1

You have to consider two things:

• In your code you render OverlayTrigger without any condition, so Tooltip is always shown. Make the rendering conditional (opposite of disabled logic)
• Showing tooltip on disabled element is not possible, you need a wrapper: https://react-bootstrap.netlify.app/components/overlays/#overview

Tooltips for disabled elements must be triggered on a wrapper element.

.

{itemActions.map((action) => {
    const disabled = action.id === 1; // your logic goes in here: unusedBlock > 0 && action.id === 1
    const dropdownItem = (
        <MyDropdownItem action={action} disabled={disabled} />
    );
    return disabled ? (
        <OverlayTrigger
            overlay={<Tooltip id="tooltip-disabled">SOMETHING!</Tooltip>}
        >
            <div>{dropdownItem}</div>
        </OverlayTrigger>
    ) : (
      dropdownItem
    );
})}

https://codesandbox.io/s/affectionate-lalande-cgiiyh