I have a lightning-button and want to display a tooltip/hover text whenever the button's disabled attribute is true.

<lightning-button variant="brand" label="Test Button 1" data-value={test1.Id} title={showTitleOnDisable} disabled={isFileDownloadable}>

Below is the getter function to choose the title text:

get showTitleOnDisable(){
            return 'Test successful';
            return 'Error';

The above code works well when disabled attribute evaluates to false but there is no output in case button is disabled.

Is this some kind of a limitation in HTML? Is there any alternative to achieve this functionality.


As an alternative, You can use Lightning Design System to achieve it:-

    <button class="slds-button slds-button_neutral" title="showTitleOnDisable" disabled={isFileDownloadable}>Test Button 1</button>   

It works in both case.

  • Thanks Sanket! for pointing me towards the LDS approach. My first preference was to build it through the native LWC tags but its always good to get things working!!!
    – NoviceSfdc
    Dec 16 '20 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.