0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.