1

I want to implement field level Help in Lightning component

Lightning component snippet:

<img src='utility:help' alt="Image" class="helpOrb" onmouseover='{!$ObjectType.Custom_Contact__c.fields.Custom_Account__c.inlineHelpText}' />

but help is not showing on onmouseover.

0
3

Just add title attribute to img tag and add your help text in title.

2

OnMouseOver is a JavaScript event, not for displaying inline help text.

See Field Level Help for how to add your own. Snippet copied from SLDS:

<div class="slds-form-element">
  <div class="slds-form-element__label">
    <label class="slds-align-middle" for="form-help">Text Label</label>
  </div>
  <div class="slds-form-element__icon">
    <a href="javascript:void(0);">
      <svg class="slds-icon slds-icon--x-small slds-icon-text-default" aria-hidden="true">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
      </svg>
      <span class="slds-assistive-text">Help</span>
    </a>
  </div>
  <div class="slds-form-element__control">
    <input type="text" id="form-help" class="slds-input" placeholder="Field Level Help" aria-describedby="help" />
  </div>
</div>
<div id="help" class="slds-popover slds-popover--tooltip slds-nubbin--bottom-left" role="tooltip" aria-live="polite" style="position:absolute;top:15px;left:103px;margin-left:-1rem;width:20rem;">
  <div class="slds-popover__body slds-text-longform">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facere eligendi reiciendis obcaecati.</p>
  </div>
</div>

You'll need to replace the svg with lightning:icon.

2
  • How to show this help text only on hover ? – brahmaji tammana May 29 '17 at 6:25
  • Title may work but i want to show the help text on hover. Is it possible ? – brahmaji tammana May 29 '17 at 6:36

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.