When you hover over a recent item in your salesforce sidebar it pops out a box that shows you a few details from the record as defined in the mini page layout for that object.

I would like to implement add this functionality to a standard list view in salesforce. So as the user hovers over the name of an opportunity the mini page layout is displayed anchored on where the cursor is at the time and disappearing when the user moves off the record to the next.

For example the My Tasks homepage component displays just the functionality that I want when you hover over the subject field.

Anyone got any good ideas for how I could do this?

For reference here is the HTML associated with the My Tasks subject column

<a href="/00TD000001EqI86" onmousemove="ActivityHover.getHover('TaskHoverPage_00TD000001EqI86').setPosition(event)" onmouseout="ActivityHover.getHover('TaskHoverPage_00TD000001EqI86').hideHover()" onmouseover="ActivityHover.getHover('TaskHoverPage_00TD000001EqI86').showHover(event, '/ui/core/activity/TaskHoverPage?retURL=%2Fhome%2Fhome.jsp&amp;id=00TD000001EqI86&amp;isHvr=1&amp;nocache=1347554003419&amp;shBus=true')">Investigation Can we display opportunity information in the Approval management views?</a>

And here is the TaksHoverPage div. It looks to me like this div was generated by salesforce when it rendered the page because it contains data from the record. Does anyone know if I can co-opt that functionality?

<div class="taskBlock"><div class="bPageBlock brndScnBrd secondaryPalette" id="TaskHoverPage_00TD000001EqI86_page"><div class="pbHeader brndPrmBrd"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="pbTitle"><h2 class="mainTitle">Task Detail</h2></td><td class="pbButton"><input value=" Edit " class="btn" name="edit" onclick="navigateToUrl('/00TD000001EqI86/e?retURL=%2Fhome%2Fhome.jsp&amp;id=00TD000001EqI86',null,'edit');" title="Edit" type="button"><input value="Delete" class="btn" name="delete" onclick="if ((Modal.confirm &amp;&amp; Modal.confirm('Are you sure?')) || (!Modal.confirm &amp;&amp; window.confirm('Are you sure?'))) navigateToUrl('/setup/own/deleteredirect.jsp?delID=00TD000001EqI86&amp;retURL=%2Fhome%2Fhome.jsp&amp;_CONFIRMATIONTOKEN=lMt.XhVcwghXqAyNliJwEe0MRhxTdRlW7vk4lB1DahJvaypQYm35JKjkHuXqepic39XAFrTN_mjUTUwmL5ksbuHN1rcvEXmDau.mLcTzzheQU5giIh74zCwy7k0yeFlBkiwWTw7NV7dkcw1scjk39OWd4hE%3D',null,'delete');" title="Delete" type="button"></td></tr></tbody></table></div><div class="pbBody">
<div class="pbSubsection"><table class="detailList" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="labelCol">Assigned To</td><td class="dataCol"><a href="/00520000001Jl5e">Owner</a></td></tr>
<tr><td class="labelCol">Type</td><td class="dataCol">Other</td></tr>
<tr><td class="labelCol">Subject</td><td class="dataCol">Investigation Can we display opportunity information in the Approval management views?</td></tr>
<tr><td class="labelCol">Due Date</td><td class="dataCol">&nbsp;</td></tr>
<tr><td class="labelCol">Related To</td><td class="dataCol"><a href="/a0HD000000BtT0E">Issue00321</a></td></tr>
<tr><td class="labelCol">Name</td><td class="dataCol">&nbsp;</td></tr>
<tr><td class="labelCol">Status</td><td class="dataCol">Not Started</td></tr>
<tr><td class="labelCol">Priority</td><td class="dataCol">Normal</td></tr>
<tr><td class="labelCol last">Reminder</td><td class="dataCol last"><div><img src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked">31/07/2012 08:00</div></td></tr>
</tbody></table></div></div><div class="pbFooter secondaryPalette"><div class="bg"></div></div></div></div>

Attribution to: Born2BeMild

Possible Suggestion/Solution #1

I would use Javascript, jQuery, and qTip.

You can place whatever you want in the qTip, depending on the requirements I would display the table your talking about in the qTip.

If it's a more complex Visualforce page, you might want to use an iFrame.

It's kind of hard to tell exactly what you want to display based on your code.

You might have to build a custom VF page to display this. If your working with the related list display on a standard object page, you can't inject javascript in the same way.

Attribution to: jordan.baucke

Possible Suggestion/Solution #2

If you want different fields than the standard minipage layout it's better to create yours. What you can do is to use a span in your link and display it by CSS when you hover it:

HTML :

<a href="/00TD000001EqI86" class="info"><span>here the content of your mini page layout</span>John Doe</a>

CSS :

a.info {
position: relative;
color: black;
text-decoration: none;
}
a.info span {
display: none; 
width:300px;     //size of the Mini page Layout
height:200px;
}
a.info:hover {
    z-index: 1000;      
}

 a.info:hover span {
display: inline; 
position: absolute;
top: 0px;         //position of the mini page layout
left: 20px;
background: white;
padding: 3px;
border: 1px solid black; 
 }

You have probably to adapt the css to your page but it might work.

Attribution to: Cloud Ninja

Possible Suggestion/Solution #3

Replace ihe Id with the record id and the name with what u want to show using salesforce standard methods no scripting - benifit modify mini page layout field will be added on your hover good luck :)

<a href="/{!acc.id}" id="lookup{!acc.id}opp4" onblur="LookupHoverDetail.getHover('lookup{!acc.id}opp4').hide();" onfocus="LookupHoverDetail.getHover('lookup{!acc.id}opp4', '/{!acc.id}/m?retURL=/{!acc.id}&isAjaxRequest=1').show();" onmouseout="LookupHoverDetail.getHover('lookup{!acc.id}opp4').hide();" onmouseover="LookupHoverDetail.getHover('lookup{!acc.id}opp4', '/{!acc.id}/m?retURL=/{!acc.id}&isAjaxRequest=1').show();">
{!acc.Name}
 </a>

Attribution to: Avijit
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/1427