[SalesForce] How to make SLDS tooltip appear on hover over

I have created an input check box that is on SLDS visualforce page. I am trying to display help text when a user hovers over the help icon. How can I set up the hover over action so that the tooltip can appear?

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

Best Answer

Use CSS selector to select element that are placed immediately after hovered button.

<apex:page id="Test">
    <apex:slds />
    <style type="text/css">
        button:hover + .slds-popover.slds-popover_tooltip.slds-hide {
            display : block!important;
        }
    </style>
    <div style="padding-left:2rem;padding-top:5rem;position:relative">
        <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 xmlns:xlink="http://www.w3.org/1999/xlink"
                     xlink:href="/apexpages/slds/latest/assets/icons/action-sprite/svg/symbols.svg#info">
                </use>
            </svg>
            <span class="slds-assistive-text">Help</span>
        </button>
        <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-hide" role="tooltip" id="help" style="position:absolute;bottom:25px;left:15px;">
            <div class="slds-popover__body">{!$ObjectType.Contact.fields.Deceased__c.InlineHelpText}</div>
        </div>
    </div>
</apex:page>
Related Topic