[SalesForce] Implementing tooltip in a lightning component

I want to position the tooltip according to the hovered element. How can I do this in lightning without using jquery?

Best Answer


Note that now salesforce provides out of box component lightning:helptext which provides pop up and help text .

You can roll your own version of the tooltip component where you can change positions and styling as per your need

Here is a simple example


<aura:component >
<div class="slds-form-element">
   <div class="slds-form-element__icon slds-align-middle" onmouseover="{!c.display}" onmouseout="{!c.displayOut}">
      <button class="slds-button slds-button slds-button--icon" aria-describedby="help" title="Help" >
         <lightning:icon iconName="utility:info" size="xx-small" alternativeText="Help"/>
         <span class="slds-assistive-text">Help</span>
<div class="slds-popover slds-popover--tooltip slds-nubbin--left-top toggle" role="tooltip" id="help" style="position:absolute;top:-4px;left:20px;" aura:id="tooltip">
   <div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>


  display : function(component, event, helper) {
    helper.toggleHelper(component, event);

  displayOut : function(component, event, helper) {
   helper.toggleHelper(component, event);


   toggleHelper : function(component,event) {
    var toggleText = component.find("tooltip");
    $A.util.toggleClass(toggleText, "toggle");


 .THIS.toggle {
   display: none;

The application can be created to test this

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

enter image description here

enter image description here

Please note this is a draft and you can further create attributes and generalise few things like text and position .

Note that you can change various positions of tooltip based on the class

.slds-nubbin--left, .slds-nubbin--left-top, .slds-nubbin--left-bottom, .slds-nubbin--top-left, .slds-nubbin--top-right, .slds-nubbin--right-top, .slds-nubbin--right-bottom, .slds-nubbin--bottom-left, .slds-nubbin--bottom-right.

Related Topic