Thursday, 14 September 2017

SLDS - Tooltip Example

 <div class="slds-grid slds-wrap slds-grid--pull-padded" >
                            <div class="slds-col--padded slds-size--1-of-3 slds-medium-size--1-of-3 slds-large-size--1-of-3">
                                <div class="slds-form-element" onmouseover="{!c.showempinfo}" onmouseout="{!c.hideempinfo}">
                                    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">                                  
                                        <lightning:icon class="icn slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" iconName="utility:info" size="small"  />
                                        <ui:inputNumber aura:id="contribution" class="slds-input" value="{!v.groupAccount.employeeContribution}" placeholder="Employee Contribution" />
                                    </div>
                                </div>
                                <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-fall-into-ground" role="tooltip" aura:id="empinfo" style="position: absolute; top: -32px; left: 275px;">
                                    <div class="slds-popover__body">
                                       This text will show as a tooltip on placing the mouse over the component. on removing the mouse the tooltip hides itseflf.
                                    </div>
                                </div>
                            </div>
</div>




controller.js

    showempinfo : function(component, event, helper){
        console.log('showempinfo success');
        var cmpTarget=component.find('empinfo');
         $A.util.removeClass(cmpTarget, 'slds-fall-into-ground');
        $A.util.addClass(cmpTarget, 'slds-rise-from-ground');
    },
    hideempinfo : function(component, event, helper){
        console.log('hideempinfo success');
        var cmpTarget=component.find('empinfo');
         $A.util.removeClass(cmpTarget, 'slds-rise-from-ground');
        $A.util.addClass(cmpTarget, 'slds-fall-into-ground');
    }

No comments:

Post a Comment