SharePoint Tooltip Popup Preview - Round 2

*** UPDATED 18 Feb 09 re: Stout's comment ***
(see the bottom of this post)

A little over a month ago I posted an article about how to include popup previews into SharePoint calendars with the caveat that it was a more complex solution than I typically post. In the course of my last few projects, I've stumbled across better ways to accomplish this in a much cleaner way which I'll address here.

This is a two-step process and will require that you to have access to SharePoint Designer if you want it to look clean and professional.

Step 1 - Create the Popup page

1. From within SharePoint Designer, create a new document.
2. Insert > SharePoint Controls > List Form
3. In the next window, select the list that you want to create the popup for and make sure that the "Display" button is selected and that the "Show standard toolbar" box is unchecked.
4. Next, customize the page to suit your tastes, but you'll need to either set the width of the page to 450px or tweak the code below to match whatever width you specify.
5. Save this new page and remember where because you'll be using that address in the code below. This example assumes that the file name is "popUpDispForm.aspx".
   

Step 2 - Add the Code

1. Make any changes to the code as required by steps 4 & 5 above.
2. Open the list that you're working with for editing in your browser.
3. Add a Content Editor Web Part (CEWP) to the bottom of the page.
4. Open the "Source Editor..." window for the CEWP and add the following code:

   <div id="popUp" onMouseOut='popDown()'
   style="position:absolute;display:none;">
   <iframe id="popUpFrame" src="" frameborder="0px"
   style="width:450;
   height:300;
   border-style:dashed;
   border-width:1px;
   border-color:black;
   position:absolute;
   top:0px;
   left:0px;">
   </iframe>
   </div>
   <script type="text/javascript">
   var popUp = document.getElementById("popUp");
   var theAs = document.getElementsByTagName("A");
   var browser = navigator.appName;
   var a = 0;
   while (a < theAs.length)    // insert onMouseOver event into the Title column links
   { try
   { if (theAs[a].href.search("DispForm.aspx") > 0 && theAs[a].href.search("SPBookmark") < 0)
   { theAs[a].setAttribute("myId", theAs[a].href.substr(theAs[a].href.search("ID=")+3));
   if (browser == "Netscape") { theAs[a].addEventListener('mouseover', toolTip, false); }
   else { theAs[a].attachEvent('onmouseover', toolTip); }
   }
   }
   catch(err){}
   a+=1;
   }
   
   function popDown()
   { popUp.style.display = "none"; }
   
   function toolTip(e)
   {
   var x = (browser == "Netscape") ? e.target.getAttribute("myId") : e.srcElement.getAttribute("myId");
   url = "http://path/to/popUpDispForm.aspx?ID=" + x;
   document.getElementById("popUpFrame").src = url;
   popUp.style.top = e.clientY - 5;
   popUp.style.left = e.clientX + 5;
   popUp.style.display = "";
   }
   </script>

• This code will look through all the links on the page and for each one that points to "DispForm.aspx" it will add the popup when you hover the mouse over the link.

Enjoy and as always, I'm happy to help with any implementation troubles you may encounter!

*** UPDATE FOLLOWS ***

To answer Stout's question in the comments section, it is possible to have the "EditForm.aspx" popup in the tooltip instead of "DispForm.aspx", though I found formatting this form was a bit trickier.

To do this, follow the same steps above, but with the following modifications:

Step 1 -

1. No changes.
2. No changes.
3. Select "Edit Item Form" instead of "Display Item Form".
4. Use the following CSS to help format your form:

   <style type="text/css">
   .ms-formlabel {
   font-family: "Courier New", Courier, monospace;
   font-size: x-small;
   font-weight: bold;
   width:50px;
   overflow:hidden;
   }
   .ms-formbody {
   font-family: "Courier New", Courier, monospace;
   font-size: x-small;
   }
   .ms-descriptiontext {
   font-family: "Courier New", Courier, monospace;
   font-size: xx-small;
   }
   .ms-standardheader {
   font-family: "Courier New", Courier, monospace;
   font-size: x-small;
   }
   .ms-toolbar {
   font-family: "Courier New", Courier, monospace;
   font-size: xx-small;
   }
   </style>
   

5. Use the file name of "popUpEditForm.aspx" instead of "popUpDispForm.aspx".

Step 2 -

1. No changes.
2. No changes.
3. No changes.
4. Make the following substitutions in the Javascript code to point to the new form:

   function toolTip(e)
   {
   ...
   url = "http://path/to/popUpDispForm.aspx?ID=" + x;
   ...
   }

   is changed to

   function toolTip(e)
   {
   ...
   url = "http://path/to/popUpEditForm.aspx?ID=" + x;
   ...
   }