The component props
A React element with a tooltip-enabled IconButton
MUI Tooltips don't work correctly with disabled buttons because disabled elements don't fire mouse events. This component wraps the IconButton in a span to ensure the tooltip always works, regardless of the button's disabled state.
Key Features:
Basic usage:
import { TooltipIconButton } from '@hiyve/utilities';
import SaveIcon from '@mui/icons-material/Save';
function SaveButton({ hasChanges, onSave }) {
return (
<TooltipIconButton
tooltip="Save changes"
disabled={!hasChanges}
onClick={onSave}
>
<SaveIcon />
</TooltipIconButton>
);
}
With placement and color:
import { TooltipIconButton } from '@hiyve/utilities';
import DeleteIcon from '@mui/icons-material/Delete';
function DeleteButton({ onDelete, disabled }) {
return (
<TooltipIconButton
tooltip={disabled ? "Cannot delete" : "Delete item"}
placement="bottom"
disabled={disabled}
onClick={onDelete}
color="error"
>
<DeleteIcon />
</TooltipIconButton>
);
}
With custom tooltip props:
import { TooltipIconButton } from '@hiyve/utilities';
import InfoIcon from '@mui/icons-material/Info';
function InfoButton() {
return (
<TooltipIconButton
tooltip="More information"
tooltipProps={{
arrow: true,
enterDelay: 500,
}}
>
<InfoIcon />
</TooltipIconButton>
);
}
A wrapper component that properly handles tooltips on potentially disabled IconButtons.