0

I have multiple fields, I want to show different tooltips based on the mouse on hover of the label.

Ex: Label1 Label2

For Lable1 I want to show tooltip label1 and for Label2 -- tooltip label2.

I tried this code. It is working. But for many cases, we need to create multiple aura attributes and set the message differently.

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


 <div class="slds-col slds-size_1-of-12" role="listitem">
                <div class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">
                    <span   class="slds-form-element__label">Team Name 1
                        <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">Team Name Tooltip </div>
                    </div>
                </aura:if>                         
                    </span>
                    <div class="slds-form-element__control">
                        <div class="slds-form-element__static">
                            <aura:if isTrue="{!v.contRecod.categoryID__c  == '10'}">
                               <img src="{!$Resource.GreenCircle2626}"/>

                                <aura:set attribute="else">
                                  <img src="{!$Resource.RedColor2626}"/>
                                </aura:set>
                            </aura:if> 
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-col slds-size_1-of-12" role="listitem">
                <div class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">
                    <span onmouseover="{!c.showToolTip}" onmouseout="{!c.HideToolTip}"  class="slds-form-element__label">Team Name 2
                        <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">Team Name Tooltip </div>
                    </div>
                </aura:if>                         
                    </span>
                    <div class="slds-form-element__control">
                        <div class="slds-form-element__static">
                            <aura:if isTrue="{!v.contRecod.categoryID__c  == '10'}">
                               <img src="{!$Resource.GreenCircle2626}"/>

                                <aura:set attribute="else">
                                  <img src="{!$Resource.RedColor2626}"/>
                                </aura:set>
                            </aura:if> 

                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-col slds-size_1-of-12" role="listitem">
                <div class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">
                    <span   class="slds-form-element__label">Team Name 3
                        <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">Team Name Tooltip </div>
                    </div>
                </aura:if>                         
                    </span>
                    <div class="slds-form-element__control">
                        <div class="slds-form-element__static">
                            <aura:if isTrue="{!v.contRecod.categoryID__c  == '10'}">
                               <img src="{!$Resource.GreenCircle2626}"/>

                                <aura:set attribute="else">
                                  <img src="{!$Resource.RedColor2626}"/>
                                </aura:set>
                            </aura:if> 

                        </div>
                    </div>
                </div>
            </div>

Controller logic:

 showToolTip : function(c, e, h) {
    c.set("v.tooltip" , true);

},
HideToolTip : function(c,e,h){
    c.set("v.tooltip" , false);
},

With this logic i can see all labels at a time. But it should be different tooltip for different label.

  • Have you considered using lightning:helptext component. In your case since the tooltip variable is common, you will see them all. Either you need to declare different variable or you can use CSS pseudo classes like :hover to show hide individual tooltip. – manjit5190 Mar 24 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.