function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sfdc4sfdc4 

Need Help on Hover Pop up

I need to display the owner field visualforce page pop up on the parent window,It is now displaying inside child window so it is some how hiding the pop up so please help me out in this issue below is the code for visual force page and controller

 

 

Page :

 

<apex:page standardController="Account" extensions="PopupTest" standardStylesheets="true">
 <!-- <apex:includeScript value="{!$Resource.JQuery}"/>-->
 <apex:form >
<style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: #000 url(bg-texture.png) repeat;
        color: #dddddd;
      }
     
           
      a {
        color: #EB067B;
      }
     
        
      /* HOVER STYLES */
      div#pop-up {
        display: none;
        z-index: 10;
        position: absolute;
        width: 200px;
        padding: 30px;
        background: #FFFFFF;
        color: #000000;
        border: 3px solid #C0C0C0;
        font-size: 100%;
      }
   
    </style>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script
 <script type="text/javascript">
 
      $(function() {
        var moveLeft = 10;
        var moveDown = 5;
       
        $('a#trigger').hover(function(e) {
          $('div#pop-up').show();
                  }, function() {
          $('div#pop-up').hide();
        });
       
        $('a#trigger').mousemove(function(e) {
          $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
        });
       
      });
    </script>

    <apex:repeat value="{!accounts}" var="acc">     
        <a href="/{!acc.ownerId}" id="trigger" >{!acc.Owner.Name}</a>.
  </apex:repeat>
    <!-- HIDDEN / POP-UP DIV -->
    <div id="pop-up">
      <div> <table> <tr>
                           <td>
                             <b>  Name  </b> :
                           </td>
                           <td >  
                             {!$User.FirstName} {!$User.LastName}<br/>
                           </td>
                     </tr>
                     <tr>
                           <td>
                               <b>  Role  </b> :
                           </td>
                           <td>  
                                {!$UserRole.Name}<br/>
                           </td>
                     </tr>
                     <tr>
                         <td>
                             <b>  Phone </b> :
                          </td>
                          <td> 
                              {!$User.Phone}<br/>
                          </td>
                     </tr>
                     <tr>
                         <td>
                           <b>  Email </b> :
                         </td>
                         <td>
                           {!$User.Email}<br/></td>
                     </tr>
                </table>
            </div>
    </div>
   </apex:form>
</apex:page>

 

Controller:

 

public with sharing class PopupTest {
    public PopupTest(ApexPages.StandardController controller) {

    }


    public String getOwner() {
        return null;
    }

 
    public List<account> getAccounts()
    {
        List<account> accounttList = new List<account>();
        accounttList = [Select Id, Name,ownerId,Owner.Name from Account LIMIT 1];
        return accounttList ;
    }

}

 

 

 

Sunil MadanaSunil Madana
Hello, can you try the below code for visual force page. I changed the pop-up javascript code; If the solutions does not work, please let us know.
<apex:page standardController="Account" extensions="Class_906F000000099FkIAI" standardStylesheets="true">
    <apex:form >
        <style type="text/css">
            
            /* HOVER STYLES */
            div#pop-up {
                display: none;
                z-index: 10;
                position: absolute;
                width: 300px;
                padding: 15px;
                background: #FFFFFF;
                color: #000000;
                border: 3px solid #C0C0C0;
                font-size: 100%;
            }
            
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
        <script type="text/javascript">
			$(function() {
				var moveLeft = 10;
				var moveDown = 5;
            
				$('a#trigger').hover(function(e) { $('div#pop-up').show(); }, function() { $('div#pop-up').hide(); });
				$('a#trigger').mousemove(function(e) { $("div#pop-up").show(); });
			});
        </script>
        <apex:repeat value="{!accounts}" var="acc">     
            <b>Name</b>: <a href="/{!acc.ownerId}" id="trigger" >{!acc.Owner.Name}</a><br/>
            <b>Role</b>: {!$UserRole.Name}<br/>
            <b>Phone</b>: {!$User.Phone}<br/>
            <b>Email</b>: {!$User.Email}
        </apex:repeat>
        <!-- HIDDEN / POP-UP DIV -->
        <div id="pop-up">
            <div>
                <table>
                    <tr>
                        <td><b>Name</b>: {!$User.FirstName} {!$User.LastName}</td>
                    </tr>
                    <tr>
                        <td><b>Role</b>: {!$UserRole.Name}</td>
                    </tr>
                    <tr>
                        <td><b>Phone</b>: {!$User.Phone}</td>
                    </tr>
                    <tr>
                        <td><b>Email</b>: {!$User.Email}</td>
                    </tr>
                </table>
            </div>
        </div>
    </apex:form>
</apex:page>