Mouse Hover custom helptext tooltip in a Visualforce page

Question

I want a tool tip next to the Label 'Finance Sources'. If I hover the cursor on the label 'Finance Sources' the tool tip does not appear. However, if I hover the mouse above the label the tool tip text 'Need to put in data here' appears.

I would like the text 'Need to put in data here' to appear when the cursor is on the Label 'Finance Sources'

Where do I need to place the Visualforce component tag to be able to display the tip on hovering on the label?

// Visualforce 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: 1px;">
                      <div class="body">{!helpText}</div>
                  </div>
             </div>
        </apex:component>

// VFP

            <div class="row">
                            <div class="col-1"><br></br>
                                <apex:outputText id="AppendixA1">
                                    <h3><b>{!$Label.Appendix_A}</b></h3><br></br>
                                    <p>{!$Label.eD_Appendix_A}</p>
                                </apex:outputText>
                                
                                <div class="col-1">
                                    <br></br>
                        <c:HoverOverMouse helpText="Need to put in data here."/><h4><b>{!$Label.eD_Finance_Sources_Label}</b></h4><br></br>
                                   
                                    <apex:outputPanel id="FinanceSources">
                                        <div id="finance-sources">
                                        <p>
                                        --------
                                         </p>   
                                        </div>
                                    </apex:outputPanel>
                                </div>
                            </div>
            </div>

Answer 1

I see you have used <div> instead of <span> in your Hover component.

Here is a sample using simple css.

VFComponent:

<apex:component selfClosing="true">
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            left: 115px;

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
    </style>
    <apex:attribute name="helpText" description="Help Text." type="String" required="true"/>
    <span class="tooltiptext">{!helpText}</span>
</apex:component>

---

VFPage :

<div class="row">
    <div class="col-1">
        <div class="col-1 tooltip">
            <c:HoverOverMouse helpText="Need to put in data here."/>
            <h4>
                <b>Financial Sources</b>
            </h4>
        </div>
    </div>
</div>