5

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?

4

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).

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.

1

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

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>

0

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.

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.