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.

1 Answer 1


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, 2020 at 8:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .