Lightning tooltip on mousehover

Lightning tooltip on mousehover

In component file:

<aura:component >

   <aura:attribute name="tooltip" type="boolean" default="false" />

    <div style="padding-left:2rem;padding-top:5rem;position:relative">

        <a href="" aria-describedby="help" onmouseover="{!c.showToolTip}" onmouseout="{!c.HideToolTip}">Help Text</a>

        <aura:if isTrue="{!v.tooltip}" >

            <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="help" style="position:absolute;top:-4px;left:35px">

                <div class="slds-popover__body">Show ToolTip.</div>

            </div>

        </aura:if>

    </div>

</aura:component>

In controller js file

({

 showToolTip : function(c, e, h) {

        c.set("v.tooltip" , true);

    },

HideToolTip : function(c,e,h){

        c.set("v.tooltip" , false);

    }

})

 

Source: https://developer.salesforce.com/forums/?id=9062I000000XkcKQAS