Using Hover Help Text in Lightning Component

Question

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.

Answer 1

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

Answer 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.