[SalesForce] Visualforce Help Text Background Color

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

Best Answer

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>

Related Solutions

[SalesForce] VisualForce version of HTML colspan command

Assuming you want to do this in a table, you would use the colspan attribute of <apex:column>. Quoting from the documentation, colspan represents:

The number of columns that this column spans in the table. Note that this value does not apply to the header and footer cells.

Example:

<apex:datatable value="{! myList}" var="item">
  <apex:column colspan=2 value="{!item.column}"/>
</apex:datatable>

Note: Keep in mind that you can always apply custom CSS and classes to the apex controls.

[SalesForce] How to post to Chatter from Visualforce using Javascript

Given the limitations of Professional Edition (no Apex Classes or Salesforce API) I can think of a few:

1. Remote Objects (coming in Spring '14)

Remoting without the need for Apex Code: Andy Fawcett has a great introduction to Remote Objects.

<apex:page>
  <apex:remoteObjects>
    <apex:remoteObjectModel name="FeedItem__c" jsShorthand="Post" fields="Body, ParentId">
      <apex:remoteObjectField name="Body" jsShorthand="body"/>
    </apex:remoteObjectModel>
  </apex:remoteObjects>
  <script>

    //create the record
    var post = new SObjectModel.Post({
      Body = 'Herp derp chatter post here!',
      ParentId = '{!$User.Id}'
    });

    //go postal
    post.create();

  </script>
</apex:page>

2. Use SFORCE javascript tool after installing some API-enabled app

The sforce 'AJAX toolkit' may be suitable if you can get API access enabled for the PE organization.

<apex:page>
  <apex:includeScript value="/soap/ajax/29.0/connection.js" />
  <script>

    //create the record
    var post = new sforce.SObject('FeedItem');
    post.Body = 'Herp derp chatter post here!';
    post.ParentId = '{!$User.Id}';

    //go postal
    sforce.connection.create([post]);

  </script>
</apex:page>