tooltips on disabled buttons are not rendered

[danielrona]

While tying to explain to users why a button is disabled I realized that tooltips do not show up on disabled buttons.

<div>

<flux:tooltip content="Tooltip will not show up on disabled buttons">
    <flux:button disabled>
        Disabled Button
    </flux:button>
</flux:tooltip>

<flux:tooltip content="Tooltip will show up on enabled buttons">
    <flux:button>
        Enabled Button
    </flux:button>
</flux:tooltip>

</div>

[jeffchown]

@danielrona Personally, I prefer that a disabled button not provide any feedback/interaction (such as displaying a tooltip) as that could confuse a user into thinking it is active.

[danielrona]

@jeffchown I prefer to inform users what they have to toggle/switch/or fill out specifc things

this lets me free up some space in the UI and not have random error messages that might be on a different tab / section of the page.

I guess this is a very subjective topic, should have opened a discussion rather than a issue.

[jeffchown]

@danielrona Agreed, there are different ways to approach this.

You can 'force' the tooltip this way:

<div class="flex items-center space-x-2">
    <flux:tooltip content="Tooltip will not show up on disabled buttons">
        <div>
            <flux:button disabled>
                Disabled Button
            </flux:button>
        </div>
    </flux:tooltip>

    <flux:tooltip content="Tooltip will show up on enabled buttons">
        <flux:button>
            Enabled Button
        </flux:button>
    </flux:tooltip>
</div>

[calebporzio]

Hmmm this is tricky. A brief search has shown me there isn't really a consensus whether or not tooltips should be shown on disabled buttons.

Seeing that are actually plenty of valid reasons to use them on disabled buttons tells me we should at least support the option.

The tricky bit is that in Flux our buttons have disabled:pointer-events-none, which prevents all pointer/mouse events from being dispatched when a user however over the button, so it's impossible to listen for a mouse hover. This is why the wrapping div workaround that @jeffchown suggests works.

Turns out this isn't just an odd quirk of Flux, but also how Bootstrap works and they even documented the workaround!:

https://getbootstrap.com/docs/4.4/components/tooltips/#disabled-elements

I wonder if maybe we just do the same thing. Have a section on the tooltips page or button page about showing on disabled tooltips just like Bootstrap does. What do we think?

[jeffchown]

Given your explanation @calebporzio, I think documenting the reason and workaround is good for now until/if enough use cases arise to add the option.