1

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

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>

| improve this answer | |

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.