6

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

  • 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 Jan 3 '17 at 10:44
  • 1
    @TusharSharma Is there any way to customize contents of title attribute of the lightning tags? thanks. – nilesh_ramteke Jan 3 '17 at 11:46
  • Yes you can add your own message. – Tushar Sharma Jan 3 '17 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 Jan 3 '17 at 13:15
  • Nope. You'd need to create your own title substitute with JavaScript. – Tushar Sharma Jan 3 '17 at 13:16
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.

  • This works. But is there any way to change the offset of the tooltip with pure or SF javascript. – nilesh_ramteke Jan 3 '17 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 Jan 3 '17 at 13:53
  • The tootip should move with pointer. – nilesh_ramteke Jan 3 '17 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 Jan 24 '17 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> 
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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.