How to add help text to fields with SLDS

Question

I have a VF page which has SLDS formatting. I am trying to add help text to certain fields. I am using Custom Controller and am instantiating a Contact in my Constructor to get out of the box field info. How can I add the help text in SLDS.

This is my SLDS field:

  <div class="slds-form-element slds-form-element_horizontal">
       <span class="slds-form-element__label">Deceased</span>
    <div class="slds-form-element__control">
       <apex:inputField value="{! con.Deceased__c}"/>
    </div>
</div>

In standard VF I can use this:

<apex:pageBlockSectionItem helpText="{!$ObjectType.Account.fields.Name.InlineHelpText}">
        <apex:outputField value="{!myAccount.Name}"/>
</apex:pageBlockSectionItem>

How can I implement both?

Answer 1

This is what I was bale to figure out:

   <div class="slds-form-element__icon">
    <button class="slds-button slds-button_icon slds-button slds-button_icon" aria-describedby="help" aria-disabled="true" title="Help">
      <svg class="slds-button__icon" aria-hidden="true">
        <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/action-sprite/svg/symbols.svg#info')}"></use>
      </svg>
      <span class="slds-assistive-text">Ivo</span>
    </button>
  <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-slide-from-top-to-bottom slds-rise-from-ground" role="tooltip" id="help" style="position:absolute;top:-90px;left:-16px" >
    <div class="slds-popover__body">{!$ObjectType.Contact.fields.Deceased__c.InlineHelpText}</div>
  </div>
  </div>