salesforce中使用标准和自定义组件多种方式实现helpText（tip tool）效果 - 合集／配图

场景描述：在为泸州老窖开发CRM系统招投标站点Site模块时，遇到helpText字段的icon无法显示或者显示了icon，但是hover上去却没有提示框。因此对此现象抽离出了如下两个具体问题。

问题1、如何开发类似标准页面的help提示效果的更加友好的编辑界面，来帮助游客（合作伙伴，供应商）更好理解字段含义或知道如何录入信息才合法呢？

问题2、为什么在showHeader="false"的vf页面上，显示不出icon，有没有办法可以让它在所有情况都能显示的解决方案呢？

你需要知道标准方法展示help提示的技术边界 - 瓶颈：

However, there are two scenarios where helpText Bubble is not displayed in the VisualForce page.

1、If we use "Label" attribute of <apex:outputField>
, then helpText bubble is not displayed in visualforce page.

2、If we set "showHeader=false"  of <apex:Page>, in that case also helpText bubbles is not displayed in visualforce page.

3、If we edit help description in a field, you can enter up to 255 characters.
===============++++++++++++说正事专用分隔符++++++++++++++================
我们先看下效果preview：



===============++++++++++++对比分隔符++++++++++++++================



Code参考：

helpIcon.component:

<apex:component selfClosing="true">
<apex:attribute name="helpText" description="Help Text." type="String" required="true"/>
<div class="mouseOverInfoOuter" id="searchInvoiceHelper" onfocus="addMouseOver(this)" onmouseover="addMouseOver(this)" tabindex="0">
<img src="/s.gif" alt="" class="infoIcon" title="" />
<div class="mouseOverInfo" id="searchInvoiceHelperText" style="display: none; opacity: -0.19999999999999996; left: 16px;">
<div class="body">{!helpText}</div>
</div>
</div>
</apex:component>

helpText.component:

<apex:component >
<style>
.vfHelpText a{float: left;margin-left: -1.7em;position: relative;}
.vfHelpText a span{display: none;}
.vfHelpText a:hover span{
display: block;
position: absolute;
top: 1.75em;
padding: 2px 5px;
left: -15em;
width: 15em;
z-index: 100;
border: 1px solid orange;
background-color: #FEFDB9;
color: #000;
}
</style>
<apex:attribute name="value" description="This is a helpText." type="String" required="true"/>
<span class="vfHelpText">

b825
<a href="javascript:return false;">
<img src="/s.gif" alt="" class="helpOrb" />
<span>{!value}</span>
</a>
</span>
</apex:component>

VF Page:

<apex:page standardController="Account" showHeader="false">
<apex:sectionHeader title="helpText Test - {!Today()}" />
<apex:form >
<apex:pageBlock title="Standard helpText">
<apex:pageBlockSection columns="2">
<apex:pageBlockSectionItem helpText="{!$ObjectType.Account.Fields.NumberOfEmployees.InlineHelpText}">
<apex:outputLabel value="{!$ObjectType.Account.Fields.NumberOfEmployees.Label}" />
<apex:inputField value="{!Account.NumberOfEmployees}" />
</apex:pageBlockSectionItem>
<apex:inputField value="{!Account.Industry}"/>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock title="Custom helpText component">
<apex:pageBlockSection columns="2">
<apex:inputField value="{!Account.Phone}"><c:helpIcon html-referenceUrl="http://www.codebycody.com/2014/08/super-simple-help-text.html" helpText="Example: 1215551212. No dashes, please"/></apex:inputField>
<apex:outputField value="{!Account.Industry}"><c:helpIcon html-referenceUrl="http://www.codebycody.com/2014/08/super-simple-help-text.html" helpText="Example: 1215551212. No dashes, please"/></apex:outputField>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock title="HelpText best practice">
<apex:pageBlockSection >
<apex:inputField value="{!Account.AnnualRevenue}"><c:helpText html-url="https://blog.internetcreations.com/2012/05/using-hover-help-text-in-visualforce/#.WdXiyhNL8dU" value="年度收益"/></apex:inputField>
<apex:outputField value="{!Account.Industry}"><c:helpText html-url="https://blog.internetcreations.com/2012/05/using-hover-help-text-in-visualforce/#.WdXiyhNL8dU" value="选项列表：行业，Example：高新技术、医疗、制造业、3C等"/></apex:outputField>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>