[SalesForce] How to add tooltips to lightning:input components

Is there an easy way to add tooltips to lightning:input components? My goal is to have a small lightning:icon wedged right in front of the input field's label, which when you hover over it, displays a tooltip with text from a component attribute, v.hoverText, or some such. A couple of questions:

Do the new base components support tooltips at all? I tried adding “title=” but I get no-such-attribute error. I found documentation for a lightning:tooltip tag, but using it in a component throws a no-such-component error.

I can follow the SLDS documentation to build an icon (without using lightning:icon) and give it a tooltip, but how do I get that icon to be on the same line with the lightning:input field’s label? Do I need fancy css to undo the natural linebreak that occurs between components? I suppose I could make the label for lightning:input blank, and then wrap it in a custom "label" component that includes the icon with the tooltip, but is there an easier way?

Best Answer

"fieldLevelHelp" attribute works for lightning:input component too even though it's not been documented. It's documented for lightning-input and aura components use LWC under the covers.

<lightning:input label="Custom Label" 
             value="Custom Text" 
             fieldLevelHelp="Help text goes here" />

You can also create your own field with custom rendering using the below code without the need for any CSS:

<lightning:layoutItem>
 <span class="slds-form-element">
     <label for="textInput" 
            class="slds-form-element__label slds-no-flex">
         Custom Label
     </label>
     <lightning:helptext content="{!v.fieldLevelHelp}" />
     <div class="slds-form-element__control slds-grow">
         <!--Custom rendered element -->
         <a id="textInput" 
            target="_blank" 
            href="{/lightning/r/'+v.recordId + '/view'}"> 
            Custom Link Label
         </a>
     </div>
</span>
</lightning:layoutItem>
Related Topic