0

I am using help-text component in my lightning web component.

<lightning-helptext content="Size (width x height x lenght)"></lightning-helptext>

enter image description here

How can I change the tooltip background and text color?

I added this to my css but it does not work

.THIS .slds-popover_tooltip, 
.THIS .slds-popover--tooltip {
    background: #FF0000; /* background color */
    color: #444444; /* text color */
}
0

I do not think you can access the component's children like this and according to the documentation you cannot apply custom styling for the tooltip content in lightning-helptext using

--sds-c-tooltip-*

You can only change the styling of the button

<lightning-helptext content="Size (width x height x lenght)" class="newColor"></lightning-helptext>

css

.newColor{
    --sds-c-button-color-background: #FF0000;
}

Additionally you could try something like that

<div style="padding-left:2rem;padding-top:5rem;position:relative">
        <button class="tooltip-btn slds-button slds-button_icon slds-button slds-button_icon" aria-describedby="help"
            aria-disabled="true" title="Help">
            <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
            </svg>
            <span class="slds-assistive-text">Test</span>
        </button>
        <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-hide" role="tooltip" id="help"
            style="position:absolute;top:-4px;left:15px">
            <div class="slds-popover__body">
                Test
            </div>
        </div>
    </div>
.tooltip-btn:hover + .slds-popover.slds-popover_tooltip.slds-hide {
    display : block!important;
}
4
  • Thanks for your answer. I want to change the background of the tooltip, not the button. I try to use this --sds-c-tooltip-color-background but it does not work. Could you have any suggestions?
    –  coinhndp
    Jun 4 at 10:10
  • Ah ok I cannot use that --sds-c-tooltip-* class. So there is no way that I can change the background color right?
    –  coinhndp
    Jun 4 at 10:19
  • How can I write a custom tooltip using lightningdesignsystem.com/components/tooltips? I copy and paste the template but the tooltip always shows
    –  coinhndp
    Jun 4 at 10:25
  • I editied the answer, you need to add the slds-hide class on the popover and then some css for the button on hover. Jun 4 at 11:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.