0

I have an lwc with an input and a helptext like so*:

<lightning-input label="label1" field-level-help="pop up text"></lightning-input>

it correctly has a question mark next to the label, but the pop up text has no background so it is unreadable. I tried a number of css selector but none seem to work. Is there a specific one that works? I would prefer to avoid because it doesn't display next to the label, it displays above it like a separate line.

*I'm using Lightning out, calling the lwc from an Aura App which in turn is called from a visualforce page, unfortunately I cannot change this scheme.

2
  • Do you have custom css on your visual force page? probably some of the general styles are overriding the standard component styles – Pirata21 Apr 1 '20 at 15:23
  • Being an LWC you cannot override standard component styles - all LWC components (including standard ones) use a Shadow DOM and are entirely protected from external influence. I suggest you edit the question to add a screenshot showing the visual issue you face. – Phil W Apr 1 '20 at 16:35
0

What you will have to do instead is to override the label with your field and helptext dynamically. This is easy to do if you have the details that you need from the backend already.

Simple HTML Example:

<div class="slds-p-around_medium lgc-bg">
        <label class="slds-form-element__label">
            <span class="slds-m-right_small">Some Label</span>
            <lightning-helptext content="Here is some help text"></lightning-helptext>
        </label>
        <lightning-input-field field-name="Name" variant="label-hidden" ></lightning-input-field>
    </div>

enter image description here

Or with a custom help element:

div class="slds-p-around_medium lgc-bg">
        <label class="slds-form-element__label">
            <span class="slds-m-right_small">Some Label</span>
            <lightning-helptext icon-name="utility:like" content="Enter a value and click Like"></lightning-helptext>
        </label>
        <lightning-input-field field-name="Name" variant="label-hidden" ></lightning-input-field>
    </div>

enter image description here

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.