A lightning:helptext component displays an icon with a popover containing a small amount of text describing an element on screen. The popover is displayed when you hover or focus on the icon that’s attached to it. This component is similar to a tooltip and is useful to display field-level help text. HTML markup is not supported in the tooltip content.
Sample Lightning Component:
<!--Sample.app-->
<aura:component >
<div class="slds-m-around_xx-large">
<div class="slds-form-element">
<lightning:input aura:id="email" placeholder="Please enter your email" required="true" type="email" label="Email" name="email" />
<!--Helptext and tooltip component-->
<lightning:helptext iconName="utility:info" content="Your email address will be your login name" />
</div>
</div>
</aura:component>
Here is an example of Progress Bar field using Formula in Salesforce. In below example I’m displaying the percentage progress bar, based on a Student’s scored out of total marks.
In the JS controller, we can use one of the following methods to find out which button was clicked. event.getSource().getLocalId() returns the aura:id of the clicked button. event.getSource().get("v.name") returns the name of the clicked button.
In Salesforce formula field using IMAGE(image_url, alternate_text, height, width) function, we can insert an image with alternate text and height/width specifications.
In below example, I’ve created a custom field “Priority__c” in “Case” object with below formula. This formula displays a red, yellow, or green flag image to indicate case priority High, Medium or Low.