B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > ExamplePoint > Site > LoadTipOriginal  

Web Part Page Title Bar image
LoadTip Original

Expand/Collapse M E N U (click) : Examples ‎(21)

 Issues

Sort by AttachmentsUse SHIFT+ENTER to open the menu (new window).
1
Issue Number 1Use SHIFT+ENTER to open the menu (new window).
Active(2) Normal
2
Issue Number 2Use SHIFT+ENTER to open the menu (new window).
Resolved(1) High
3
Issue Number 3Use SHIFT+ENTER to open the menu (new window).
Closed(3) Low

Here is a great solution that Paul Grenier put together with JQuery.  With this solution you get a popup for any issue, task or custom list.  This does not work with link lists.

You will get a pop up when you mouse over the title of the list item.  It will show all metadata for that item.  What a wonderful solution so that you do not have to click on the issue to see all the details.

Below you will find the code you can add to a CEWP or the webpart you can add to any page.

Steps to adding script:

  1. Add a Content Editor Web Part (CEWP) to your page that has the list.
  2. Copy the code below
  3. In the CEWP click "Source Editor"
  4. Paste the code into the window that pops up.
  5. Click "Save"
  6. You should now be able to mouse over the "Title" field of an item in the list and have a pop up.
    • Make sure the Title field is part of the fields showing.  This field is required.
LoadTipDate Updated: 02/10/2009
This JQuery solution provides a popup for ay of the following lists: Announcements, Issues, Tasks, and custom lists.

<STYLE type=text/css>
#loadTip{ 
    background: #6F9DD9; 
 color: #fff;
    border: 2px solid #6F9DD9; 
    font-size: 10px; 
    padding: 3px; 
    width: 342px;
 display: none;
 position: absolute;
 text-align: right;
}
#tipContent {
 background: #fff;
 padding: 3px;
}
</STYLE>

<SCRIPT type=text/javascript>
if(typeof jQuery=='undefined'){
 var jQPath = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/'
 document.write('<script src="',jQPath,'jquery.min.js" type="text/javascript"><\/script>');
}
</SCRIPT>
<SCRIPT type=text/javascript>
function handleError() {
 return true;
}
function initLoadTip(group) {
 var loadTip = $("#loadTip");
 if (!group) group = "#MSO_ContentTable";
 var arrayList = $(group+" a[href*='DispForm.aspx']");
 $.each(arrayList, function(i,e){
  var a = $(e).attr("href").split("#");
  $.data(e,"dispTarget",a[0]);
  $(e).mouseenter(function(event){
   var cssShow = {"top":event.pageY, "left":event.pageX+10};
   if ($.data(loadTip,"dispTarget") && $.data(loadTip,"dispTarget") == $.data(e,"dispTarget")) {
    loadTip.css(cssShow).show();
   }else{
    if (loadTip.timer) clearTimeout(loadTip.timer);
    loadTip.timer = setTimeout(function () {
     $("#tipContent").load(a[0]+" .ms-formtable", function(){
      loadTip.css(cssShow).show();
      $.data(loadTip,"dispTarget",a[0]);
     });
    }, 200);
   }
  });
  loadTip.click(function(){
   loadTip.hide();
  });
 });
}
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
    $("#tbod"+groupName+"_").attr("isloaded",isLoaded)
  .html(htmlToRender)
  .show("fast",initLoadTip("#tbod"+groupName+"_"));
}
$(function() {
 window.onerror = handleError;
 $(document.createElement("div")).attr("id","loadTip")
  .html("<span>click to close </span><img style='vertical-align:text-top;' src='/_layouts/images/menudark.gif' alt=''/>")
  .appendTo("body");
 $(document.createElement("div")).attr("id","tipContent")
  .appendTo("#loadTip");
 initLoadTip();
});
</SCRIPT>

 

 ‭(Hidden)‬ loadTip