Salesforce Helptext with Custom Tooltip

Often we need to override native layout in salesforce by custom implementations. In order to go on this way I have explored field-level Help Text Tool-Tip in customize way.

Here is a very simple example to build more understanding over this.

Visualforce Code :

<apex:page standardController="Opportunity">
    <!-- Style Panel Satrts--->
    <style type="text/css">
        .imgclass:hover{
            background-image: url(/img/help/helpOrbs.gif);
            background-repeat: no-repeat;
            width: 16px;
            height: 15px;   
            background-position: right;
       
        }
        .imgclass{
            background-image: url(/img/help/helpOrbs.gif);
            background-repeat: no-repeat;
            width: 16px;
            height: 15px;
        }
    </style>
    <!-- Style Panel Ends--->
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection title="Enter Information">
                <apex:pageblockSectionItem >
                    <apex:outputPanel >
                        <apex:outputlabel value="Enter Opportunity Name"/>                                        
                        <img src="/s.gif" Class="imgclass" title="Please Enter Opportunity Name" />
                    </apex:outputPanel>
                    <apex:inputField value="{!Opportunity.Name}"/>              
                </apex:pageblockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>   
</apex:page>

Share your feedback..