1

I am newbie in salesforce and lightning too. I want to show tooltip on image which is coming as iteration of records. For the time being this will remain same[static] on all images. I created below code for image and popup but it is not coming on hover. please suggest [also pop is always displaying on the page]

Image Code:

<c:svg svgPath="/resource/lightningresources/assets/icons/action-sprite/svg/symbols.svg#test" 
      aria-describedby="tooltiparea" category="standard" 
      name="Search" class="slds-icon slds-icon--small"/>

PopUpCode

<div class="slds-popover slds-nubbin--bottom" id="tooltiparea" role="tooltip" aria-hidden="true">
        <div class="slds-popover__body">
        <table class="slds-table slds-table--bordered slds-table--cell-buffer">
          <tbody>
            <tr>
               <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Price</div>
              </td>
              <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">$10.00</div>
              </td>
              <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">$10.00</div>
              </td> 
            </tr>
          </tbody>
        </table>
 </div>
</div>
2
  • Can you please put more of your code here - specifically your inclusion of the SLDS CSS and your wrapper / scoping div. Sep 20, 2016 at 20:05
  • Did you have any luck implementing the code? If you are getting stuck, take my EXACT code and re-create it in lightning. It should work (if you haven't implemented the onmouseleave handler, remove the handler, else you may get an error) Sep 22, 2016 at 5:14

1 Answer 1

3

I'm not totally sure why but I have made a component for you that does the job.

First, create the component (I've named this one PopoverImg):

<aura:component >
    <aura:attribute name="popoverMessage" type="String" default="message here"/>
    <span onmouseenter="{!c.handleMouseEnter}" onmouseleave="{!c.handleMouseLeave}" class="slds-icon_container slds-icon-standard-case" >
        <c:SVG class="slds-icon " xlinkHref="{!$Resource.SLDS105 + '/assets/icons/standard-sprite/svg/symbols.svg#case'}"></c:SVG>
    </span>

    <span id="popover" aura:id="popover" class="slds-popover slds-nubbin--left slds-hide" role="dialog" >
        <div class="slds-popover__body">
            <p>{!v.popoverMessage}</p>
        </div>
    </span>
</aura:component>

Now, handle mouse enter and leave events (necessary to show and hide the popover). Do this in your controller or helper:

NOTE: I've left out the mouseout handler. I want you do figure out how to add this to the code - it's very simple - and similar to the handleMouseEnter method.

({
    handleMouseEnter : function(component, event, helper) {
        var popover = component.find("popover");
        $A.util.removeClass(popover,'slds-hide');
    }
    //make a mouse leave handler here
})

Finally, add this component to your application:

<aura:application >
    <!-- I'm assuming you are adding your slds library here -->
    <div class="slds">
    <ul>
        <aura:iteration items="one,two,three" var="item">
            <c:PopoverImg popoverMessage="{!item + ' has been hovered over'}"/>
            <br/>
        </aura:iteration>
    </ul>
    </div>
</aura:application>
4
  • Thanks a lot for you time @Caspar, but there are couple of things that i want to understand if you allow, first-slds-hide is not hiding the div, so i assume none of the other classes are also not working properly. so i hide the span using class and removed that class onhover. Second: when i let that span become visible by removing the class, it is not appearing as popup but message apeearing just below the icon. please suggest
    – Coder
    Sep 20, 2016 at 14:41
  • You have probably not properly included the lightning design system. Have you followed the steps described here: trailhead.salesforce.com/en/project/… Sep 20, 2016 at 17:41
  • Note how my outer div is scoped as 'slds'. If you have generated a scoped CSS file as described in the link above, you'll want to change that to whatever your scope name is (once your have included that CSS file as a static resource). It's all in the guide. Sep 20, 2016 at 17:42
  • Small remark for all the people using SLDS popover: it's good to override position CSS property of slds-popover class to position: absolute. Otherwise showing popover breaks the layout of your page and moves your link element on the page.
    – Wookie88
    Apr 27, 2017 at 14:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .