6

I want to position the tooltip according to the hovered element. How can I do this in lightning without using jquery?

Improve this question
5
  • Are you using Lightning tag because from Spring 17 many Lightning component have title tag this releasenotes.docs.salesforce.com/en-us/spring17/release-notes/…
    – Tushar Sharma
    Commented Jan 3, 2017 at 10:44
  • 1
    @TusharSharma Is there any way to customize contents of title attribute of the lightning tags? thanks.
    – nilesh_ramteke
    Commented Jan 3, 2017 at 11:46
  • Yes you can add your own message.
    – Tushar Sharma
    Commented Jan 3, 2017 at 12:24
  • 1
    @TusharSharma I am really sorry that I was not clear before. Can I add markup to the title attribute? This is where I am having problems. thanks.
    – nilesh_ramteke
    Commented Jan 3, 2017 at 13:15
  • Nope. You'd need to create your own title substitute with JavaScript.
    – Tushar Sharma
    Commented Jan 3, 2017 at 13:16

4 Answers 4

Reset to default
11

Update:

Note that now salesforce provides out of box component lightning:helptext which provides pop up and help text .

You can roll your own version of the tooltip component where you can change positions and styling as per your need

Here is a simple example

tooltip.cmp

<aura:component >
<div class="slds-form-element">
   <div class="slds-form-element__icon slds-align-middle" onmouseover="{!c.display}" onmouseout="{!c.displayOut}">
      <button class="slds-button slds-button slds-button--icon" aria-describedby="help" title="Help" >
         <lightning:icon iconName="utility:info" size="xx-small" alternativeText="Help"/>
         <span class="slds-assistive-text">Help</span>
      </button>
   </div>
</div>
<div class="slds-popover slds-popover--tooltip slds-nubbin--left-top toggle" role="tooltip" id="help" style="position:absolute;top:-4px;left:20px;" aura:id="tooltip">
   <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>  
</aura:component>

tooltipController.js

({
  display : function(component, event, helper) {
    helper.toggleHelper(component, event);
  },

  displayOut : function(component, event, helper) {
   helper.toggleHelper(component, event);
  }
})

tooltipHelper.js

({
   toggleHelper : function(component,event) {
    var toggleText = component.find("tooltip");
    $A.util.toggleClass(toggleText, "toggle");
   }
})

tooltip.css

/*toggleCss.css*/
 .THIS.toggle {
   display: none;
 }

The application can be created to test this

<aura:application extends="force:slds">
   <c:tooltip/>
</aura:application>

enter image description here

enter image description here

Please note this is a draft and you can further create attributes and generalise few things like text and position .

Note that you can change various positions of tooltip based on the class

.slds-nubbin--left, .slds-nubbin--left-top, .slds-nubbin--left-bottom, .slds-nubbin--top-left, .slds-nubbin--top-right, .slds-nubbin--right-top, .slds-nubbin--right-bottom, .slds-nubbin--bottom-left, .slds-nubbin--bottom-right.

Improve this answer
4
  • This works. But is there any way to change the offset of the tooltip with pure or SF javascript.
    – nilesh_ramteke
    Commented Jan 3, 2017 at 13:50
  • Sorry I do not understand what you mean by offset . Lightning components uses JavaScript and CSS so the core logic remains same
    – Mohith Shrivastava
    Commented Jan 3, 2017 at 13:53
  • The tootip should move with pointer.
    – nilesh_ramteke
    Commented Jan 3, 2017 at 13:56
  • 1
    On a similar note, how would you offset the nubbin by a certain number of pixels? For example, you have desire bottom-right, but if your icon is close to the left of the screen, that would cause the tooltip to be off the screen (-x). Let's say that bottom wasn't desired, how would you get the nubbin to bottom-right - 10px for example? It's tricky since there's a pseudo-class and the only way I can see it do this is to add CSS, which is much trickier than being able to use JS to manipulate the DOM elements directly.
    – jon_wu
    Commented Jan 24, 2017 at 3:13
1

Seems a bit old question but here is how I just implemented this, basically you can place this line above your lightning input element and it will have a label and a helptext tooltip.

<div class="slds-grid slds-grid_align-spread">
   <label class="slds-form-element__label slds-text-heading_label">Text Label </label>
   <lightning:helptext iconName="utility:info" content="Some help text" />    
</div>
Improve this answer
0

Salesforce provides its own standard tooltip component. So no need to write lots of UI/UX.

here is the example

https://developer.salesforce.com/docs/component-library/bundle/lightning:helptext

Improve this answer
0

As I mentioned in a related post

"fieldLevelHelp" attribute works for lightning:input component too even though it's not been documented. It's documented for lightning-input and aura components use LWC under the covers.

You can also create your own field with custom rendering using the below code without the need for any CSS:

<lightning:layoutItem> <span class="slds-form-element"> <label for="textInput" class="slds-form-element__label slds-no-flex"> Custom Label </label> <lightning:helptext content="{!v.fieldLevelHelp}" /> <div class="slds-form-element__control slds-grow"> <!--Custom rendered element --> <a id="textInput" target="_blank" href="{/lightning/r/'+v.recordId + '/view'}"> Custom Link Label </a> </div> </span> </lightning:layoutItem>

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .