Salesforce - Display hover text when hovering on the standard lightning button that is disabled

user_14969128 0
Viewed 3927

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?

salesforce-lightning lwc salesforce html javascript
1 Answers

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

user_109259300
Related