I am getting error that
helper.showElement is not a function
when I am clicking on a lightning:icon which is acting as a button. I have also tried the same with lightning:buttonIcon, but still getting the same error. I want to show tool tip on click of this icon. Code significant to problem goes as follows:
Markup:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="AdminPageComponentController">
<fieldset class="slds-form--compound">
<div class="slds-form-element slds-is-required container slds-is-relative">
<div class="slds-form-element__control">
<!--Other code here -->
<div class="slds-grid">
<div>
<ui:inputText aura:id="abcID" label="ABC"
class="slds-input"
labelClass="slds-form-element__label"/>
</div>
<div>
<!--<button aura:id="helpText" class="slds-button slds-button slds-buttonicon" onclick="{!c.showHelpTextA}" onblur="{!c.hideHelpTextA}">
<lightning:icon iconName="utility:info" size="x-small"/>
<span class="slds-assistive-text">Help</span>
</button>-->
<lightning:buttonIcon aura:id="helpText" variant = "bare" iconName="utility:info" size="small" onclick="{!c.showHelpTextA}" />
</div>
<div aura:id= "helpTextDiv" class="slds-hide slds-popover slds-popover--tooltip slds-nubbin--left-top" role="tooltip" id="help" style="position:relative;top:0px;left:15px;">
<div class="slds-popover__body">{!$Label.c.help_text}</div>
</div>
</div>
<!--Other code here -->
</fieldset>
</div>
{!v.body}
</div><!-- ./container-->
</aura:component>
Controller:
showHelpTextA : function(component, helper, event){
helper.showElement(component, 'helpTextDiv');
},
hideHelpTextA : function(component, helper, event){
helper.hideElement(component, 'helpTextDiv');
},
Helper:
showElement : function(component, id){
var divElement=component.find(id);
$A.util.removeClass(divElement, 'slds-hide');
$A.util.addClass(divElement, 'slds-show');
},
hideElement : function(component, id){
var divElement=component.find(id);
$A.util.removeClass(divElement, 'slds-show');
$A.util.addClass(divElement, 'slds-hide');
},