0

I have a Visualforce page that utilizes a help orb to mimic the standard Salesforce help orb. All works properly, but I would like to change the background color of the pop-up help box. Does anyone know how I can do this? My code for the orb is below:

<span class="helpButton" id="Name-_help">
     <img src="/s.gif" alt="" class="helpOrb" title="{!$Label.DS_RichTextHelpText}"/>
</span><p/>
1

You can add the style attribute as below.

<span class="helpButton" id="Name-_help" style="background-color: yellow;">
     <img src="/s.gif" alt="" class="helpOrb" title="{!$Label.DS_RichTextHelpText}"/>
</span><p/>

Update

Here I have tried to mimic the Salesforce help style with the help of the “helpOrb” class supplied by the standard SFDC stylesheets.

<apex:page >
    <style>
        .vfHelpText a {
            position:relative;
        }
        .vfHelpText a span {
            display: none;
        }
        .vfHelpText a:hover span {
            display: block;
            position:absolute;
            top:1.25em;
            padding:2px 5px;
            left:-15em; width:15em;
            z-index:100;
            border:1px solid orange;
            background-color:#FEFDB9;
            color:black;
        }
    </style>
    <span class="vfHelpText">
        <apex:outputLink value="javascript:return false;">
            <img src="/s.gif" alt="" class="helpOrb" />
            <span>{!$Label.DS_RichTextHelpText}</span>
        </apex:outputLink>
    </span>
</apex:page>
  • Thanks. I did try that but it only changes the background of the orb icon itself, not the text box that appears when a user hovers on the orb icon. – J. Neilan Sep 24 '15 at 16:18
  • Can you please explain how the textbox comes into picture? Is it through javascript? – Saroj Bera Sep 24 '15 at 17:09
  • No. I don't have any other code besides what I posted. I believe it's the standard Salesforce functionality. – J. Neilan Sep 24 '15 at 17:58
  • Please find my updated solution. I think you are looking for this. – Saroj Bera Sep 25 '15 at 6:14
0

You need to create a CSS style whose selector matches the ID of the <span>.

Example:

<style>
  #Name-_help {
    background-color: red;
  }
</style>

<span class="helpButton" id="Name-_help">
     <img src="/s.gif" alt="" class="helpOrb" title="{!$Label.DS_RichTextHelpText}"/>
</span><p/>
  • Note that this approach is considered better practice than directly adding the style attribute to the span element. – Rob Sep 24 '15 at 15:34
  • Rob, thanks. However, that changes the background color of the actual help orb. I want to change the background color of the help text box that pops up when the user hovers on the orb. – J. Neilan Sep 24 '15 at 16:16

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.