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>

how to Unescape html in Lightning Component

 

we are going to learn about aura:unescapedHtml in lightning component

It has two attributes.

Body  : It won’t be rendered

value : It is of string type.

Lightning Component

<aura:component > 

<aura:attribute name="cval" type="String"/>

 <aura:handler name="init" value="{!this}" action="{!c.myAction}" />

 <div>

 This value is rendered by using aura:unescapedHtml : <aura:unescapedHtml value="{!v.cval}" />

 This value is rendered by span : <span>{!v.cval}</span>

 </div>

</aura:component>

controller js

({

myAction : function(component, event, helper) {

component.set("v.cval", "<span class='hello'>Hello World!!</span>");

}

})