[Feature Request] Enable Tooltip Functionality for Disabled Elements

[AlpayC]

Is your feature request related to a problem? Please describe.

Yes, the current limitation within NextUI is that tooltips are not functional for disabled elements such as buttons or select boxes. This can lead to a less informative user interface, especially when disabled elements could benefit from additional context that a tooltip would provide.

Describe the solution you'd like

I would like NextUI to support an option where tooltips can be enabled for disabled components. This would involve events that trigger tooltips to remain active even when the component itself is not interactive. Ideally, this functionality can be toggled through a prop such as tooltipOnDisabled that can be passed to the component.

Describe alternatives you've considered

An alternative solution could be creating a wrapper around the disabled component that is not disabled itself and could trigger the tooltip. However, this is not as clean or intuitive as having built-in support and could potentially lead to additional markup complexity and styling challenges.

Screenshots or Videos

No response

[mrap]

This would be great! The workaround is to wrap the Button in a <span>.

        <Tooltip content="Tooltip Text">
          <span>
            <Button>Do it</Button>
          </span>
        </Tooltip>

[jackgray]

That didn't seem to do the trick for me, but my setup is a little more complicated -- anything standing out as problematic? This behaves as expected without Tooltip, but the Tooltip disables all other functionality in this way. When used inside the button, it's not triggered

<Dropdown key={item.href}>
  <NavbarItem className="flex-shrink-0">
    <DropdownTrigger>
      <Tooltip content={item.label}>
        <span>
          <Button
            variant="light"
            className="flex items-center flex-shrink-0 p-0 bg-transparent data-[hover=true]:bg-transparent"
            radius="sm"
            style={{ 
              display: 'flex', 
              alignItems: 'center', 
              minWidth: '0', // Allows button to shrink below its default width
              flexShrink: 1, // Ensures button can shrink if needed
              gap: '0', // Removes gap between icon and text
              padding: '0'
            }}
            onPress={() => {if (!item.dropdown) { router.push(item.href)}}}
          >
            
            {item.icon && <RenderIcon name={item.icon} />}
          
            <span className="hidden sm:inline truncate ml-1">{item.label}</span>
          </Button>
        </span>
      </Tooltip>
    </DropdownTrigger>
  </NavbarItem>
  {item.dropdown && renderDropdownMenu(item.dropdown, `${item.label} Menu`)}
</Dropdown>