How to add tooltips to lightning:input components?

Question

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?

Answer 1

"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>

Answer 2

Try this

Component:

<aura:component >
    <aura:attribute name="text" type="String" default="Enter your name here.."/>
    <div style="position:relative;" class="slds-size_1-of-4">
        <lightning:input type="text" label="Name" name="nameInput"/>
        <lightning:helptext content="{!v.text}" iconName="utility:info" class="popover"/>
    </div>
</aura:component>

Style:

.THIS .popover {
    position: absolute;
    left: 14%;
    bottom: 65%;
}

You can add your own style to align the helptext component wherever you want.

Answer 3

I'm not sure you can do it currently with lightning:input. You can still put the label attribute to a blank value, but it will render a white space at the top. Then you could put a custom label at the top and play with the CSS position attribute but it's not a clean solution.

Remember that lightning:input is still in beta, so this feature may come in a future release (this could be an interesting Idea to create though).

In the meantime, you can use either your solution or use SLDS to create both your input and your tooltip.

Regarding lightning:tooltip, I think this component has been removed from the Winter '17 release, the doc is not up to date yet but you can see it's removed if you look at auradocs on your org (and when trying to save you should have an error message saying that this component doesn't exists).

Answer 4

There is no helptext attribute to the lightning Input component (not yet at least).

But you may build your own or just implement it with a label tag and a helptext component on a grid above the input element.

Example:

<div class="slds-grid slds-grid_align-spread">
   <label class="slds-form-element__label slds-text-heading_label">Text Label </label>
   <lightning:helptext iconName="utility:info" content="Some help text" />    
</div>

<ui:inputText  placeholder="Type"  name="myInput"/>

Answer 5

In case someone comes looking like I did, there is now an attribute on lightning:input that you can include to show helptext next to the field's label as you'd expect. It's called "fieldLevelHelp". Source: https://developer.salesforce.com/docs/component-library/bundle/lightning:input/specification

Answer 6

If you are looking for Tooltip both the lightning:input and lightning:icon support the title attribute! Perhaps something like this?

Pseudocode:

    <lightning:input label="" type="text" placeholder="" value="dummy text"/>
    <lightning:icon size="small" iconName="standard:account" title="Tooltip here!" variant="success"/>

Documentation:

https://developer.salesforce.com/docs/component-library/bundle/lightning:input/specification https://developer.salesforce.com/docs/component-library/bundle/lightning:icon/specification

Answer 7

Not an answer but someone has posted code to roll our own component for Tooltip:

Implementing tooltip in a lightning component

Disappointingly, something which people had been able to achieve by using:

<apex:pageBlockSectionItem helpText="some tooltip"> 

is not available in Lightning UI, amongst other things.

Answer 8

You can use an SLDS class to make a horizontal "list" of the items. Here are examples of text input and checkbox.

<aura:attribute name="myString" type="String"/>
<aura:attribute name="myBoolean" type="Boolean"/>

<div class="slds-list_horizontal" >
    <ui:inputText   label = "Enter text" value="{!myString}"/>
    <lightning:helptext content="Input something!" />
</div>
<div class="slds-list_horizontal" >
    <ui:inputCheckbox value="{!myBoolean}"/>
    <lightning:helptext content="Uncheck to do something!" />
</div>

Answer 9

Update for LWC using a date picker as an example. This one shows on the right side, but you can easily see how this could be moved to the left as well

HTML

<div class="slds-var-m-around_xx-large slds-is-relative">
    <lightning-input
        type="date"
        name="start-date"
        class="start-date"
        label="Start Date"
        required>
    </lightning-input>
    <lightning-helptext 
        content="this is some text"
        icon-name="utility:info"
        class="start-date-help-text">
    </lightning-helptext>
</div>

CSS

.start-date-help-text {
    position: absolute;
    top: 0rem;
    left: 4.2rem; //this is variable based on the width of the label text
}

Playground here https://developer.salesforce.com/docs/component-library/tools/playground/U0ogMwKni/8/edit