2

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 components.

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?

chandu
  • 21
  • 1
  • 2

2 Answers2

1

You won't be able to achieve this with the lightning-button LWC component, however Salesforce does have some great documentation on their Lightning Design system, so with a little bit more code, we are able to accomplish 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.

Here is an image of the code working

Sources:

Salesforce Lightning Design System (Buttons)

W3 Schools CSS Tooltip

Tyler Edwards
  • 184
  • 2
  • 9
0

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 enter image description here

I hope this will help other members in the future

Guillaume
  • 11
  • 2