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

2 Answers 2

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>
4
  • 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, 2015 at 16:18
  • Can you please explain how the textbox comes into picture? Is it through javascript?
    – Saroj Bera
    Sep 24, 2015 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, 2015 at 17:58
  • Please find my updated solution. I think you are looking for this.
    – Saroj Bera
    Sep 25, 2015 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/>
2
  • Note that this approach is considered better practice than directly adding the style attribute to the span element.
    – Rob
    Sep 24, 2015 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, 2015 at 16:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .