0

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(){
        if(!this.isFileDownloadable){
            return 'Test successful';
        }else{
            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

0

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

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

It works in both case.

1
  • 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 .