function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
DramseyDramsey 

Help Text Icon Not Highlighting

In building a visualforce page, I am trying to utilize the standard salesforce help icon (or help orb). However, I noticed when I first hover/visit the icon, the help text appears, but the icon remains grayed out. If I go back and revisit/hover over the icon, the icon is highlighted with the standard orange color.

 

Am I missing a simple step or piece of code that is causing this issue? I would like it to highlight on the first visit/hover, but do not see/know where that is controlled.

 

Below is my visualforce code and the supporting CSS. Any help is much appreciated. Thanks!

 

                      <span class="vfHelpText">

                             <apex:outputLink value="">

                                 <img src="/s.gif" alt="" class="helpOrb" />

                                       <span>This is help text.</span>

                             </apex:outputLink>

                         </span>

 

 

.vfHelpText a            {position:relative;

                                  white-space: normal;}

.vfHelpText a span       {display: none;}

.vfHelpText a:hover span {display: block;

                                  position:absolute;

                                  top:1.25em;

                                  padding:2px 5px;

                                  left:0em; width:15em;

                                  z-index:100;

                                  border:1px solid orange;

                                  background-color:#FEFDB9;

                                  color:black;}

Best Answer chosen by Admin (Salesforce Developers) 
b.ajitkumarb.ajitkumar

Hi,

 

Set  styleClass="helpButton" to the <apex:outputLink tag as shown below (underlined):

 

<apex:page showHeader="true" sidebar="false">
    <style>
    .vfHelpText a{position:relative; white-space: normal;}
    .vfHelpText a span {display: none;}
    .vfHelpText a:hover span {display: block; position:absolute; top:1.25em; padding:2px 5px; left:0em; width:15em;z-index:100;border:1px solid orange;background-color:#FEFDB9;color:black;}
    </style>
  <span class="vfHelpText">
     <apex:outputLink value="" styleClass="helpButton" >
         <img src="/s.gif" alt="" class="helpOrb"/>
               <span>This is help text.</span>
     </apex:outputLink>
 </span>
 </apex:page>

 

All Answers

b.ajitkumarb.ajitkumar

Hi,

 

Set  styleClass="helpButton" to the <apex:outputLink tag as shown below (underlined):

 

<apex:page showHeader="true" sidebar="false">
    <style>
    .vfHelpText a{position:relative; white-space: normal;}
    .vfHelpText a span {display: none;}
    .vfHelpText a:hover span {display: block; position:absolute; top:1.25em; padding:2px 5px; left:0em; width:15em;z-index:100;border:1px solid orange;background-color:#FEFDB9;color:black;}
    </style>
  <span class="vfHelpText">
     <apex:outputLink value="" styleClass="helpButton" >
         <img src="/s.gif" alt="" class="helpOrb"/>
               <span>This is help text.</span>
     </apex:outputLink>
 </span>
 </apex:page>

 

This was selected as the best answer
DramseyDramsey

That did the trick! Thanks so much for your help. It saved me hours of trying to figure out what was going on.