3

Currently, my lightning helptext tag is as below:

<lightning:helptext iconName="utility:info" content="Small = < 3MM, 

                                                     Medium = 3MM - 25MM 

                                                     Large = >25MM" />

And the result is enter image description here

But I want to show it line by line on the toolip(helptext)

Ex:

Small=<3M
Medium =3M-20M
Large = >25M

Please share the solution

1
  • Are you saying you want to show the values in new line for all values (as edited in the post now)? Or its something different?
    – Jayant Das
    Sep 12 '18 at 18:59
4

You can't do any additional formatting inside lightning:helptext, including forcing line breaks. The content attribute is treated as a plain text string, so any attempts to provide any additional formatting will fail to work. Instead, you would need to use normal SLDS tooltips. This means you'd have to write all that logic yourself, including showing/hiding the text, etc.

2
salesforce still doesn't support styling for help text, for workaround slds tooltips works. Here's an example

enter image description here

HTML

<div style="position:relative">
   <div class="slds-form-element">
    <label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
    <div class="slds-form-element__icon">
        <button class="slds-button slds-button_icon" onmouseover={togglePasswordHint}
            onmouseout={togglePasswordHint}>
            <lightning-icon icon-name="utility:info" alternative-text="Info" size="xx-small"
                title="">
            </lightning-icon>
        </button>
        <div class={passwordHintClass} role="tooltip" id="help"
            style="position:absolute;top:-100px;left:-15px;width:200px">
            <div class="slds-popover__body">
                Password must contain: <br>
                At least 8 characters, <br>
                At least 1 uppercase letter, <br>
                At least 1 lowercase letter, <br>
                At least 1 number, <br>
                At least 1 special character.
            </div>
        </div>
    </div>
    <div class="slds-form-element__control">
        <input type="text" id="text-input-id-1" placeholder="Placeholder text…"
            class="slds-input" />
    </div>
  </div>
</div>

In js file

passwordHintClass = "slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-fall-into-ground slds-hide"
togglePasswordHint() {
    this.passwordHintClass = this.passwordHintClass == 'slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-fall-into-ground slds-hide' ? "slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-rise-from-ground" : "slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-fall-into-ground slds-hide"
}

NOTE

style="position:absolute;top:-100px;left:-15px;width:200px">

we may have to adjust top position and sometimes width to fit the tooltip properly. In the example I'm using some long help text so -100px. for small texts -60 to -65px is enough.

otherwise it keeps toggling randomly.

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.