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