+ Start a Discussion
patskepatske 

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.
TehNrdTehNrd
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.

Code:
<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>
 
Thanks,
Jason



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

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

Code:
        <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.


shivshiv

hi

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

Cool_DevloperCool_Devloper

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,

Cool_D 

Josephreed1986Josephreed1986

Hello,

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.

vasuvasu

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 vasuandala@gmail.com

 

thanks

vasu

vasuandala@gmail.com

 

 

 

cto9dxecto9dxe

Hello patske, 

 

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

Chamil MadusankaChamil Madusanka

Hi,

 

Try this example

 

http://salesforceworld.blogspot.com/2011/08/displaying-pop-up-summaries-on-hover-in.html

 

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.



BijaySBijayS

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.

 

Thanks...:)