function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
anil Kumaranil Kumar 

lightning tooltip on mousehover

Hi All,

I want add mouse hover tool tip for the Anchor tag in the lightning component. below is my code. 

<a onclick="{!c.profilePage}">My Profile</a>

i tried with lighting helptext but it is displaying i symble  User-added image  beside My Profile link.
<lightning:helptext content="Cilick on My Profile to see your account details" />

How to show tooltip without i symbol.


Thanks,
Anil Kumar 
Best Answer chosen by anil Kumar
Ajay K DubediAjay K Dubedi
Hi Anil,

Use the below code for show tooltip on link. 

Lightning component=======: 
<aura:component >
    
    <aura:attribute name="tooltip" type="boolean" default="false" />
    <div style="padding-left:2rem;padding-top:5rem;position:relative">
        <a href="" aria-describedby="help" onmouseover="{!c.showToolTip}" onmouseout="{!c.HideToolTip}">Help Text</a>
        <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">Show ToolTip.</div>
            </div>
        </aura:if>
    </div>
</aura:component>

JS Controller=======:
  
({
    
    showToolTip : function(c, e, h) {
        c.set("v.tooltip" , true);
        
    },
    HideToolTip : function(c,e,h){
        c.set("v.tooltip" , false);
    }
})

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com

All Answers

Dhanya NDhanya N
Hi Anil,

You can use onmouseover method on <a> tag to show tooltip. And also maintain a boolean attribute, set it to true on hover of <a>. 
Please take a look into my code for reference.
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="isTooltip" type="Boolean" default="false"/>
    <a onclick="{!c.profilePage}" onmouseover="{!c.onmousehover}">My Profile</a>
    <aura:if isTrue="{!v.isTooltip}">
    	<lightning:helptext content="Cilick on My Profile to see your account details"/>
    </aura:if>

</aura:component>
JS file:  
({
    onmousehover : function(component, event, helper) {
        console.log('=onmousehover===');
        component.set('v.isTooltip', true);
    }
})
Thanks,
Dhanya

 
anil Kumaranil Kumar
Hi Dhanya,

Thank you for the responce.

If we use lightning:helptext  still i m getting i symbol. Requirement is Tooltip should be displayed with out i symbol.

Thanks,
Anil Kumar
Ajay K DubediAjay K Dubedi
Hi Anil,

Use the below code for show tooltip on link. 

Lightning component=======: 
<aura:component >
    
    <aura:attribute name="tooltip" type="boolean" default="false" />
    <div style="padding-left:2rem;padding-top:5rem;position:relative">
        <a href="" aria-describedby="help" onmouseover="{!c.showToolTip}" onmouseout="{!c.HideToolTip}">Help Text</a>
        <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">Show ToolTip.</div>
            </div>
        </aura:if>
    </div>
</aura:component>

JS Controller=======:
  
({
    
    showToolTip : function(c, e, h) {
        c.set("v.tooltip" , true);
        
    },
    HideToolTip : function(c,e,h){
        c.set("v.tooltip" , false);
    }
})

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com
This was selected as the best answer
anil Kumaranil Kumar
Hi Ajay,

Thank you Ajay. This is exactly i am looking for.

Thanks,
Anil Kumar 
Nick IrwinNick Irwin
Thanks a ton for sharing this... I was creating a similar functionality on cpstest.pro but wasn't working as intended. I implemented your solution and now it works perfectly fine! thanks again.