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

Hover Detail style popups

I'm just thinking this one out loud right now.

I was wondering if on my Visual Force page that I have created with custom objects and my desired custom layout. A Hover Detail style interface much like what salesforce uses in the sidebar for recent items when 'hover detail is enabled'.

Any points in the right direction would also be very much appreciated.

So basically I have a visual force page with all of my PageBlockTables... listing information I want in the layout that I'd like... now on some of those records I'd like to hover over the 'name' or the 'id' and trigger a "hover detail" style popup that will show some extra details that I can also choose to view / edit

Any thoughts?
Ron HessRon Hess
I think you can just copy the code in our hovers and then in your page generate this with apex tags or html or javascript.
This is something I would be interested in learning as well but right now I'm working on another big project and don't have the time to go experimenting. So patske, if you figure this one out please report back.

I pasted this in a VF page and it sort of worked but the hover showed up over the sidebar and not the link itself. The Ids could probably be pulled from a getter method in a controller.

<div class="leadBlock" onblur="MRUHoverDetail.getHover('00QS00000015RXb').hide();" onfocus="MRUHoverDetail.getHover('00QS00000015RXb').show();" onmouseout="MRUHoverDetail.getHover('00QS00000015RXb').hide();" onmouseover="MRUHoverDetail.getHover('00QS00000015RXb').show();"><div class="mruItem" id="mru00QS00000015RXb"><a href="/00QS00000015RXb" class="leadMru" accesskey="1" title="[Alt+1]"><img src="/s.gif" alt="Lead"  class="mruIcon" title="Lead"/><span  class="mruText">Tom Johnson</span></a></div></div>

Message Edited by TehNrd on 05-30-2008 08:17 PM
Thanks for the help guys.

I ended up just using this code from the hoverover details on page layouts.

        <apex:column headerValue="Name"><div id="HoverDetail"><a href="/a0ST00000007eD7" id="lookupa0ST00000007eD7" onblur="LookupHoverDetail.getHover('lookupa0ST00000007eD7').hide();" onfocus="LookupHoverDetail.getHover('lookupa0ST00000007eD7', '/a0ST00000007eD7/m—retURL=%2Fa0ST00000007eD7&isAjaxRequest=1').show();" onmouseout="LookupHoverDetail.getHover('lookupa0ST00000007eD7').hide();" onmouseover="LookupHoverDetail.getHover('lookupa0ST00000007eD7', '/a0ST00000007eD7/m–retURL=%2Fa0ST00000007eD7&isAjaxRequest=1').show();">Object Name</a></div></apex:column>

And made a minipage-layout on my custom object. It served my purpose.

Thanks for pointing me in the right direction TechNrd.... I saw that your code did popup the hover detail on the sidebar... not sure why that is but I found the other type of hover details that uses the little speech bubble instead of a highlighted bar, it does the trick.



  I am very much interested in creating hovers on mouseovers and its one of my tasks assigned for me.. i have less experience in VF n Apex.. 

So can u plz explain the same in a more generic way and with some examples plz.. this could help me a lot plz.....


Hi Patske,


Can you please educate us a little on how you achieved this?


I am trying to use this piece of code, but somehow not working for me :(


I think i am missing a link here. Would be great if you can help me with this.


Many Thanks,




My name is Joe and I have just recently been involved in salesforce, I was wondering if you could would more depth explain how you copy the code into the hover detail and what that consists of? Thank you

Apex Code DevelopmentApex Code Development

How to pass values to the show method on MRUHoverDetail.getHover({!cc1.Id}.show()...So,that when i move a mouse on to the item it should display some text on Hover.


Hi  ,


I was used pageBlockTable in my visualforce page.


I want to display hover link on each record in visual force , I was used ur code , but i missed some thing code,

the hover link popup one time and not display any data related record,


can you guide me how to do ,can you send me the complete code  to my mail Id








Hello patske, 


could you please elaborate how you were able to create the hover details

Chamil MadusankaChamil Madusanka



Try this example


chamil's blog


If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.


Hi Pat,


I am facing a similar kind of requirement where i have to Display a list of Records let say Opportunities related to Account when i hover on the Event Object Related to field related to Account.


Assume Event detail page is overridden with the VF where some fields including "Related To" field is included ,so i mean if Event is related to Account,when i hover on the the related to hyperlink instead of Account Details i should get the list of Opportunities associated with that account and when i mouseout it should go off.


Could you please guide me on this.