Salesforce -

I have a standard lightning button on the salesforce page. There are some conditions to show the button and to disable it. When the condition doesn't satisfy then I need to disable the button and when we hover on that disabled button, we should be able to see some text. I am using lightning web ponents.

HTML:

<template if:true={disableButton}>
   <lightning-button icon-name="utility:custom_apps" label="button" icon-position="left"
     onClick={doSomething} title="button is disabled" disabled></lightning-button>
</template>

Js code:

if (conditionNotSatisfied=== true){
  this.disableButton = true;
}

The functionality of disabling the button is working but when I hover over the disabled button, the text is not displayed.

Can someone help me with a suggestion on how to display the text on the disable button when I hover on it?

Salesforce -

I have a standard lightning button on the salesforce page. There are some conditions to show the button and to disable it. When the condition doesn't satisfy then I need to disable the button and when we hover on that disabled button, we should be able to see some text. I am using lightning web ponents.

HTML:

<template if:true={disableButton}>
   <lightning-button icon-name="utility:custom_apps" label="button" icon-position="left"
     onClick={doSomething} title="button is disabled" disabled></lightning-button>
</template>

Js code:

if (conditionNotSatisfied=== true){
  this.disableButton = true;
}

The functionality of disabling the button is working but when I hover over the disabled button, the text is not displayed.

Can someone help me with a suggestion on how to display the text on the disable button when I hover on it?

• javascript
• html
• salesforce
• salesforce-lightning
• lwc

Share Improve this question Follow asked Sep 27, 2021 at 21:30 chanduchandu 2111 gold badge11 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You won't be able to achieve this with the lightning-button LWC ponent, however Salesforce does have some great documentation on their Lightning Design system, so with a little bit more code, we are able to acplish what you are asking for.

YourComponent.html

<span class="tooltip">
    <button class="slds-button slds-button_neutral" disabled={disableButton} onClick={doSomething}>Neutral Button</button>
    <span class="tooltiptext">Tooltip text</span>
</span>

YourComponent.css

    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
    }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

Here is an image of the above code that I just ran in my own project. When I hover over the button now, I get a little popup on the side. This of course can be styled to your liking.

Sources:

Salesforce Lightning Design System (Buttons)

W3 Schools CSS Tooltip

I know this is post old, but I just found it while trying to achieve the same and here's my solution with the less customization I found

So I have my lightning-button

<lightning-button
    type="submit"
    label="Unlink Dev Ticket"
    onclick={handleButtonClick}
    disabled={isButtonDisabled}
    title={disabledHelpText}
    class="tooltip"
></lightning-button>

Dynamically setting the isButtonDisabled and disabledHelpText in the controller. And make sure you clear the disabledHelpText when the button is enabled

And then, for this to work, you also need to fix the pointer-events to visible. Because it's set to none on disabled buttons. Need to override it on the lightning button

So for the tooltip css class:

.tooltip {
    pointer-events: visible!important;
}

And that's how it looks like

I hope this will help other members in the future