In this article, you will learn how to implement a tooltip or lightning:helptext base component in the salesforce lightning using aura framework with examples.
We
have multiple ways to implement the tooltip in Salesforce lightning. Either
you can use standard lightning:helptext base component or you can write your
own custom CSS to design the tooltip as per your business requirement.
Different
ways to implement tooltips are discussed with examples below
- Static help text
- Dynamic help text
- Tooltip
- Customized tooltip
Static help text
Basically, help text is used to display short and static text for the field. For
example details of why the field is created, what is the business purpose, which data the field holds or any other details can be included with this. This display text
is the same for all the records.
Code
<lightning:helptext content="Test tool tip" />
For
all the records above code shows the tooltip as ‘Test tool tip’. This is a salesforce standard base component where there is no need to add extra CSS
parameters from our end.
Dynamic help text
Here
we use the same help text base component, but we change the tooltip content dynamically
for every record.
Make
use of LDS or Lightning data service to get the record data with aura attributes,
which can be mapped to the content value of the lightning help text. help text content
is changed dynamically for each record.
In
my case, I have mapped the description field to the help text, refer to the below
screenshot
Code
Component bundle
<aura:component
implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId"
access="global" >
<aura:attribute name="record"
type="Object" description="The record object to be
displayed"/>
<aura:attribute
name="caseRecord" type="Object" description="A
simplified view record object to be displayed"/>
<aura:attribute
name="recordError" type="String" description="An error
message bound to force:recordData"/>
<aura:attribute
name="recordId" type="String" />
<force:recordData
aura:id="record"
recordId="{!v.recordId}"
targetError="{!v.recordError}"
targetRecord="{!v.record}"
targetFields="{!v.caseRecord}"
fields="Description"
mode="VIEW"/>
<lightning:helptext
content="{!v.caseRecord.Description}"/>
</aura:component>
Tooltip
Please
note that the help text and tooltip both are the same. Salesforce has named standard
tooltip in the aura framework as help text.
For
the requirement to configure the tooltip to any text, image, or links then the above method cannot be used as it is a standard base component and we do not have
much control to make changes.
As per the salesforce lightning
design system documentation, we can use the below code to show the tooltip to the
text.
Code
<div
style="padding-left:2rem;padding-top:5rem;position:relative">
<a
href="javascript:void(0)" aria-describedby="help">Help
Text</a>
<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">Sit nulla est ex deserunt exercitation
anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt
duis in sint irure nisi.</div>
</div>
</div>
As the width of the tooltip is fixed in the design, the tooltip popup increases its height
when the content is huge and hides the field content from the view.
Notice
the behavior in the below screenshot
To overcome this problem, we must add our own CSS properties which is discussed in the next section.
Customized tooltip
In
this method, we are going to add our own CSS styles to design the tooltip as per
the need.
we
are using onmouseover and onmouseout JavaScript methods to dynamically bring
the tooltip to the text field.
Code
Component
file
<aura:component
implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId"
access="global" >
<aura:attribute
name="caseRecord" type="Object" description="A
simplified view record object to be displayed"/>
<aura:attribute name="recordError"
type="String" description="An error message bound to
force:recordData"/>
<aura:attribute
name="recordId" type="String" />
<force:recordData
aura:id="record"
recordId="{!v.recordId}"
targetError="{!v.recordError}"
targetFields="{!v.caseRecord}"
fields="Description"
mode="VIEW"/>
<div style='padding:30px; height:100px;
overflow:hidden' onmouseover="{!c.showtooltip}"
onmouseout="{!c.hidetooltip}">
<span>
<lightning:formattedText
value="{!v.caseRecord.Description}"/>
</span>
</div>
<div class="tooltipdiv slds-popover
toggle" aura:id='tooltip'>
<span><lightning:formattedText
value="{!v.caseRecord.Description}"/></span>
</div>
</aura:component>
Controller
JS File
({
showtooltip : function(component, event,
helper) {
helper.toggleHelper(component, event);
},
hidetooltip : function(component, event,
helper) {
helper.toggleHelper(component, event);
}
})
Helper
JS File
({
toggleHelper : function(component,event) {
var toggleText =
component.find("tooltip");
$A.util.toggleClass(toggleText,
"toggle");
}
})
CSS
.THIS.toggle
{
display: none;
}
.THIS.tooltipdiv{
width:auto;
height:auto;
padding:20px;
position:absolute;
left:45px;
box-shadow:3px 3px #888888;
background-color:#f9f9f9;
}
Try
all the methods shown above and choose the best one that suits your business
requirement. Let me know if any queries in the comments section below.
Hope
this article helps you to implement the tooltip in the lightning.
.png)
.png)
.png)
2 Comments
Nice Blog
ReplyDeleteThanks for the feedback Sumeet..
Delete