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?

enter image description here

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

// VFP

            <div class="row">
                            <div class="col-1"><br></br>
                                <apex:outputText id="AppendixA1">
                                <div class="col-1">
                        <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">

1 Answer 1


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

Here is a sample using simple css.


<apex:component selfClosing="true">
        .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;
    <apex:attribute name="helpText" description="Help Text." type="String" required="true"/>
    <span class="tooltiptext">{!helpText}</span>

VFPage :

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .