<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');
}
<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