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

Web Part Page Title Bar image
Mouseover any linkable item
Load Tip Beyond


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


Here is the latest (03/05/09) version of the work that Paul Grenier has done with regards to a popup that shows all metadata for list, calendar, and document library. 
This JQuery script allows that user to mouseover any title field or persons name and get a popup showing all the information that you would normally find if clicked on the link.  This makes it so much easier and quicker to see details without having to click in to view and then click out to return to the original view.
Below you will find the following:
  • Examples of the popup in action for a list, document library and a calendar.
  • Details outlining how you can customize the look and feel of the popup
  • Link to view the code on www.endusersharepoint.com

 List - Issues

Issue Number 3Peter Allen
Issue Number 1Peter Allen
Issue Number 2Peter Allen


SharePoint Site Structure Parts.mmap
SharePoint Site Structure PartsUse SHIFT+ENTER to open the menu (new window).
Peter Allen
SharePoint Site Structure Parts.pdf
SharePoint Site Structure PartsUse SHIFT+ENTER to open the menu (new window).
Peter Allen
Company Site Structure.pdf
Company Site StructureUse SHIFT+ENTER to open the menu (new window).
Peter Allen
ABC Site Structure.pdf
ABC Site StructureUse SHIFT+ENTER to open the menu (new window).
Peter Allen
HTMLCalculatedColumnsUse SHIFT+ENTER to open the menu (new window).
Peter Allen


< December, 2021 >
 Sun  Mon  Tue  Wed  Thu  Fri  Sat 
  Site Visit
  Full Day Event


Customize Popup Box
In Paul's JQuery script there is a section that outlines the CSS, the parameters that determines the look and feel of the popup box.  I will show you what each CSS line will do to the popup and this will allow you to customize the popup to your theme or other specific requirements.
There are two CSS sections:
  • #loadTip - this grouping has to do with the shell of the popup.
  • #tipContent - this grouping has to do with the inner part of the popup.

background: #FF0000;
  • This will change the major band around the box.  Notice what is in red is the background that will change.  Also notice that the very edge is blue and that border is changed with another attribute.

color: #FF0000;
  • This will change the color of the text in the outer part of the box.  Notice that click to close is red.
border: 10px solid #FF0000;  
  • This will change the border color and the thickness of the border.  In this example I changed the border width from 3 to 10 and I changed the color to red.

font-size: 20px;  
  • This will change the size of the text in the outer layer of the popup box.
padding: 3px;  
  • This will change the amount of spacing around the border.

width: 600px;
  • This will determine the width of the box.  The hight is dynamic and will exand depending on the amount of content.

text-align: left;
  • This will determine the placement of the text.  I can be left, center, or right justified.

display: none;
position: absolute;
  • Do not change these two attributes.  This will cause the popup to display in strange places.
background: #6F9DD9; 
  • This will change the background color to for the label names in the popup.  It will not change the background for the field content.
padding: 10px;
  • This will add spacing on the inner content between the border and the field data.
Click on the links below to see all the details of how you can add this feature. www.endusersharepoint.com has this script and many other great scripts by Paul Grenier. Enjoy.

Click to View Code | Click to Open Site