I am currently in the final stages of adding features to a new visualforce page.

I wanted to use the Jquery tooltips to display some help info when someone hovered over it.

This works, but it displays the help text at the bottom of the page as well.

From testing it appears to be showing on, or possibley somehow directly before or after the </apex:page> tag.

Visualforce:
 

<apex:page id="Page" showHeader="false" sidebar="false" standardController="Account" extensions="AccountProductExtension" action="{!ActionAccountProductRun}">
    
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
    <script>
    j$ = jQuery.noConflict();

        j$(function() {
            j$( '[id$=name_col]' ).tooltip({
                tooltipClass: "name",
            });
        });
        
        window.setTimeout(recursivecall,500);
        
        function recursivecall()
        {
          window.setTimeout(recursivecall,500);
          autosave();
        }
        
        function Confirm() {
            if ( confirm("Would you like to set a reminder to check back with the TA of {!Account.Name}?")){
                sendTask();
            }
        }    
    </script>
    
    <style>
        .name{
            display:none;
            background: #80bfff;
            font-size:12px;
            height:20px;
            width:120px;
            border: 2px solid white;
        }
    </style>

    <apex:form id="Form">
    <apex:actionFunction name="sendTask" action="{!sendTask}" reRender="out"/>
    <apex:actionFunction name="autosave" action="{!autosave}" reRender="out"/>
    <apex:pageBlock id="PageBlock" title="Associated Products and Services">
        <apex:pageBlockButtons location="Top">
            
        </apex:pageBlockButtons>
        
        <apex:pageBlockTable value="{!accountProducts}" var="p">
            <apex:column id="name_col" headerValue="Product or Service" value="{!p.name}" title="This is the Help Text!"/>

            <apex:column headerValue="Type" value="{!p.Type__c}"/>
            
            <apex:column headerValue="Status">
                <apex:inputField value="{!p.Status__c}"/>
            </apex:column>
            
            <apex:column headerValue="Date Offered">
                <apex:inputField value="{!p.DateOffered__c}"/>
            </apex:column>
            
            <apex:column headerValue="Check Back On">
                <apex:inputField value="{!p.CheckBackDate__c}">
                    <apex:actionSupport event="onchange" oncomplete="Confirm();" reRender="out">
                        <apex:param name="cDate" value="{!p.CheckBackDate__c}" assignTo="{!checkBackDate}"/>
                        <apex:param name="pName" value="{!JSENCODE(p.name)}" assignTo="{!productName}"/>
                    </apex:actionSupport>
                </apex:inputField>
            </apex:column>
            
            <apex:column headerValue="Notes">
                <apex:inputField value="{!p.Notes__c}"/>
            </apex:column>

        </apex:pageBlockTable>
    </apex:pageBlock>
    </apex:form>
</apex:page>

 

How would someone go about making a related list for a custom object function like products in opportunity do, as a list to select from with the add product button (in this case it would be add package).