Friday, December 10, 2021

Tooltip or Helptext in Lightning Component

 

 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.


Simple Component Example:-

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

Lightning Testing App:

<!--Test.app-->

<aura:application extends="force:slds">

    <c:Sample />

</aura:application>