Preview metadata in list view on mouseover – updated version

18.09.2011 I have added a bit more functionality. The CEWP code and the file “PreviewMetadata.js” has changed. Re-read this article for details.

This is a remake of a previously posted solution for previewing an item in a list when hovering over the table row or a custom image. You find the code below, but first an overview of the features.

List view
IMG

Preview on hover
IMG

This solution works in both SharePoint 2007 and in SharePoint 2010, but the code is different for the two. It is tested in plain list (and document library) views with grouping and paging, and in calendar views. You can specify which columns to preview, or have the full DispForm array of fields. If you have multiple list view web parts in one page, you can specify which lists to activate this feature on.

How to use

Download the code for the file “PreviewMetadata.js” from here. Ensure you pick the right version (SP2007 or SP2010). Upload the file to a shared document library, or put it in a folder using SharePoint Designer. You then insert a ContentEditorWebPart (CEWP) below the list view web parts in the page. You must modify the script src to the file “PreviewMetadata.js”, and if you like, to the jQuery library.

Hints

Read here how to find the list Guid and the FieldInternalName for your list fields.

CEWP code for SharePoint 2007
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/PreviewListItems/PreviewMetadata.js"></script>
<script type="text/javascript">
config = {arrOfFieldsToShow:[],
		  hideIdColumn:true,
		  activeListGuids:[],
		  hideCreatedAndModified:true,
		  hideFormLabel:false,
		  hoverDelay:100,
		  hoverImg:{active:true,
		  			path:'/_layouts/images/chm16.gif',
		  			height:'12',
		  			width:'12',
		  			prependTo:'LinkTitle',
		  			hoverImgDescription:'Hover over this image in the list to preview the list item'}};
initjLoadMe(config);
</script>
CEWP code for SharePoint 2010
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/test/EMSKJS/PreviewMetadata/PreviewMetadata.js"></script>
<script type="text/javascript">
config = {arrOfFieldsToShow:[],
		  hideIdColumn:true,
		  activeListGuids:[],
		  hideCreatedAndModified:true,
		  hideFormLabel:false,
		  hoverDelay:100,
		  hoverImg:{active:true,
		  			path:'/_layouts/images/chm16.gif',
		  			height:'12',
		  			width:'12',
		  			prependTo:'LinkTitle',
		  			hoverImgDescription:'Hover over this image in the list to preview the list item',
		  			openInDlg:true}};
		  			
initjLoadMe(config);
</script>

Note to SharePoint 2010 users:
Add this code to a text file and put it in a document library, then use the content link option on the CEWP to link to this code. This is necessary to overcome a possible “bug” in the CEWP handling when editing a SP2010 page where the HTML is accumulated when editing the page.

This tip is also recommended for SharePoint 2007 users, but is not absolutely necessary.

Parameters explained
  • arrOfFieldsToShow: Array of FieldInternalNames to show. Leave empty to show all fields from DispForm. (*) To hide the field name for individual fields in the preview, put # as a suffix to the name like this: [‘Title#’].
  • hideIdColumn: true or false. If true, the ID column must be placed to the far right in the view.
  • activeListGuids: Array of the Guids of the lists to activate this feature in. If left empty, all list view web parts will be active. Use this if you have more than one list view web part in the page and does not want to activate this feature for all web parts.
  • hoverImg: If the parameter “active” is true, the preview will be shown when the user hovers over the image specified. If false, the preview will be shown when the user hovers over the table row.
  • hideCreatedAndModified (*): true or false. Determines whether or not to show the “Creates by” and “Modified by” at the bottom of the preview.
  • hideFormLabel (*): true or false. Determines whether or not to hide the field names column entirely. When set to true, this one overrides individual field settings under “arrOfFieldsToShow”
  • hoverDelay (*): The delay in milliseconds from the user hovers over the image / row until the preview is triggered. If used with “hover” over the entire row, set this higher to prevent shoving all previews when the user swipes the mouse over multiple rows.
    • active: true or false.
    • path: The path to the image used as “hover image”.
    • height: Image height in pixels.
    • width: Image width in pixels.
    • prependTo: The FieldInternalName of the field to prepend the hover image to. The Title field with menu has FieldInternalName “LinkTitle”
    • hoverImgDescription: The Description text on the “instructions” shown above the list view.
    • openInDlg: (SharePoint 2010 only) Defines whether the form is opened in a dialog when the user clicks the hover image.

(*) New in v2.3 for SharePoint 2007 and v1.1 for SharePoint 2010.

Ask if something is unclear.
Alexander

145 Comments on “Preview metadata in list view on mouseover – updated version”

  1. Hi Alexander,

    Thank you for working on this. Based on what I have seen, I will likely stick with your older version for what I need. Some thoughts based on my limited experience with your script:
    1) If openInDlg is SP2010 only, should it be set to true, false, or removed if you have SP2007?
    2) Can we remove the entire ‘hoverImg’ argument from the config array if we don’t care about images? Does it matter?
    3) The script only works if the ID column is shown, because the hover-over gif is attached to that column. If you hide the column, no image appears to hover on and the script cannot do anything. So the ‘hideIdcolumn’ argument seems rather useless right now.
    4) Could you generate an option to choose between the gif and the row-hover? I have set up my webpart with a single column and I liked how hovering anywhere near the column value gave the popup.
    5) You provided an excellent point of flexibility in your original script where we could remove the column name from the pop-up by adding the |0 to the FieldInternalName. Now that functionality is gone. Next, you place the created/modified stamp at the bottom, again, with no option to remove.
    6) It’s even slower than your previous script on IE8. (i really wish they would upgrade our systems…)

    Essentially this program serves a far more specific purpose than the previous version. What I liked about your original script was that it was more flexible and customizable. The pop-ups did not look like a display-view form, which, to me, is was a good thing. This version, however, gives you exactly what you stated: a preview of the item.

    Best,
    Jameel

    1. Hi,
      Q1:
      Yes, you could remove it. It does not do anything in SP2007 – i just thought having one CEWP code for both was less confusing…

      Q2:
      No, the attribute “active” is used. You could remove the rest if you like.

      Q3:
      The example image was not the best – as the image was appended to the ID column. You can however prepend the image to any column you like using the parameter “prependTo” under “hoverImg”.

      Q4:
      Set the parameter “active” under “hoverImg” to false. To have the effect you describe, use for example “/_layouts/images/blank.gif” as “hoverimage” – this is like the name suggests a blank image.

      Q5:
      I will fix this and post an updated version.

      Q6:
      There are a delay og 500ms when hovering over a row or the hoverimage. If the delay is much greater than that, it’s your system that is slow… Try opening the dispform as usual – is it the same delay?

      The old version is still available if you would rather use that.

      Alexander

    2. Thank you for your quick response. My apologies for overlooking your previous instructions on getting Q3/Q4 to work right. Looking forward to your updated version. Best,Jameel

  2. Hi Alexander should this work on normal Document Library in Sharepoint 2010? I have downloaded the 2010 version and followed your instructions but it will not display the pop up at all. Neither in Document Library nor in Custom List. Does it matter that I have the Foundation version of SP2010?

    1. Just tried your new version. Thank you for adding the three arguments. the hideCreatedAndModified argument does not seem to work. I played with it for a long time, trying calling it several ways (.ms-descriptiontext, onetidinfoblock1/2/3, .style.display=’none’, showdisplayform=false, removing the parents call, .ms-formtoolbar, etc) and it always seems to pop up. Not sure why its not quite working with me.

  4. I’m using the 2007 version and I get the following popup error:

    “The ID column must be in the view. If you select to hide it in this script, place it to the far right.”

    The default list view has ID as the first column, and I get the error whether the hideIDColumn is true or false. I even made sure all the non-default views had the ID column enabled.

    Thoughts?

    3. Hi,
      If you have multiple list view web parts on the same page, you must either have the ID column visible in all list view web parts, or you must restrict which list to activate this feature in by inserting the list guid in the attrubute “activeListGuids”. If you do this, the ID column does not have to be in the view for those not active.

      Alexander

  6. Script works great first of all, awesome feature. I had a question concerning the security prompt this throws when used within a HTTPS environment. Do you know of any way around the “secure/unsecure content click yes or no” prompt being displayed when you hover over the item to activate this feature?
    Thanks again!
    ~Erich Zann

    1. Hi,
      I do not have a HTTPS-environment to test in, but this might have something to do with SharePoint “completing” the relative URL’s generated by this script.

      You could try to insert the root URL for example in line 127 (the SP2007 code) like this:

      url = "h t t p s://www.contoso.com/"+thisListCTX.displayFormUrl+"?ID=" + thisItemID;

      The “h t t p s” is written with white-space to prevent obscuring by the “code formatter” on this page – remove the white-space when you test it.

      Alexander

  7. Awesome script, congratulations ans thanks! I’m trying to remove the ‘Created by’ and ‘Modified by’ in the bootom of the preview, have set the ‘hideCreatedAndModified’ to true but it still shows. No big deal at all, I will try to debug it and let you know the results. Again, THANK YOU VERY MUCH!!! Very, very useful stuff! Genious!

    2. 2007. It is a custom list with a few colums. I display just one of the columns in the hover. Settings are:
      config = {arrOfFieldsToShow:[‘Purpose’],
      hideIdColumn:true,
      activeListGuids:[],
      hideCreatedAndModified:true,
      hideFormLabel:false,
      hoverDelay:100,
      hoverImg:{active:true,
      path:’/_layouts/images/chm16.gif’,
      height:’12’,
      width:’12’,
      prependTo:’LinkTitle’,
      hoverImgDescription:’Hover over this image in the list to preview the Grant Purpose’}};
      initjLoadMe(config);

  8. Alexander,
    First, thank you for your prompt response. I inserted the code you suggested(minus the spaces) into the meta-data .js file at line 127, though it did not appear to solve the problem. I am wondering if this might be a IE 7 bug since the issue does not happen with other browsers. One interesting thing to note is regardless of clicking the “yes” or “no” when the security prompt appears, the script still works. This makes me think the issue is IE 7 related since if I clicked “no” and it actually blocked a piece of the script, the feature shouldn’t work. As our company is all on IE 7, simply updating my browser isn’t a workable solution at the moment.
    Do you have any other ideas on how to remedy the prompt?
    Thanks again, this really is brilliant work your doing here!
    ~Erich Zann

  9. Loving the updated script – I’m looking to do some CSS styling on it with a background image, but can’t seem to see where to change the bg color for the table cells (the values, everything else I can get transparent with a background image).

    Any tips?

  10. Hi Alex,
    I can’t seem to get this working. I get the message at the top right of the list saying “Hover over this image in the list to preview the list item”, but the icon on the list that I would hover over never shows.

  12. Alex,
    I found the issue. It seems that if you use a list which has Totals (counts) in the view it prevents the hover over image from rendering on the page.

    2. Hi,
      I’ll make a note of the “Totals” messing up, but customized forms will not work as they are customized and i cannot guarantee that it will work.

      Alexander

  13. Hi Alex, thanks again for the great script!
    I am trying to modify the script so it only pop ups the preview pane if I hover over a particular column – unfortunately with no luck. Could you give me some clues of how can I do it?

    Also is there any way to put the ID column first in the view and hide it?

    1. There might be an alternative method…but given that the list is using a basic table structure (rows containing table data elements) there really isn’t a way to easily selected a column since HTML does them based off rows.
      You could have it cycle through and add the hover over ability to a specific element in every row, but it sounds like a pain to me.

    3. Well, not exactly, that’s where the icon will appear. But I don’t want to have the icon.

      I did find the way, basically because I want the preview to appear when I hover the Name column I am using it’s class it .ms-vb-title to trigger the popup.

    4. I see. I misunderstood. I thought you wanted to move the icon to a different column instead of “LinkedTitle”

      One thing I would love to see is if there is a way to make it so that Multi line text fields only display the first 100 characters and then the hover over shows the entire field content.

      I have some people here who write novels for notes. 🙂

    7. Hey Tom, can you give me some ideas how did you solve the problem you were having. I want to have same functionality but dont know where to start.
      Thank You

  14. this seems like a fairly straight forward script. Upload the js to a doc lib, place code into CEWP, and the ID column to the right. I know jquery is loaded cause i did an alert($);
    when I alert(config); I got “object object”

    Not sure what I missed. I know the path to src is correct cause I pasted it in the browser and was prompted to download it.

    any thoughts?

    1. Hi,
      Sorry for the late reply, but your comment ended up in the spam folder…

      Could it be that you are using the “hover image” and do not have the column it is appended to in the view?

      Alexander

  15. Hi Alexander,

    Thank you very much for this post. I would like to know if this should work with calendar views (month, week and day views). I did everything but doesn’t seems to work there.

    Regards,

    Nicolas

  16. Hi Alexander,

    Great work with your coding! I have applied it to one of our sites however what has happened within a list that I’ve applied the code to, when you hover over the graphical item, the popup window of metadata appears but at a much higher location on the screen and some of the information is cut off from the view. Is there away to have this window appear in a set location on the page each time?

    Thanks,
    Jason

    5. Hello. Did you ever figure out the solution for this?

      My popout goes to the bottom of the page, I can’t seem to make it just popout right next to the item title.

      PLEASE HELP!

  17. Hi Alex,

    The new version was working great, except now in IE6 I get an “Operation Aborted” error and can’t load the page at all where I’m using the script…any ideass?

    1. Hi,
      My best guess is that you load jQuery from Google – try referring it from a local copy. Are you using a virtual machine?

      Alexander

    2. As it turns out someone else was using a webpart that referenced Google’s jQuery, so I removed it and now only have our local copy being used – but the error persists.

      And yes, it is on a virtual machine.

    3. Hi,
      I have seen some strange behavior when testing various scripts in a virtual machine. I do not have any solutions, sorry.

      Alexander

    4. Hi,
      I found that i had removed something that could explain the error in IE6, try v2.4 BETA (for SP2007) and let me know if this makes any difference.

      Alexander

    9. Not the prettiest solution, but I’ve decided to call the initjLoadMe from the footer to gaurantee the page has loaded. Using js/jQuery to see if the DOM was loaded wasn’t working, but the footer does. I also use a quick check to see if I’m using the script on that page, since it’s going into my default.master and IE6 will hang on the script if I don’t tell it the page is done loading:

      if (config) { //If there is a config to use the hover over, call it
      initjLoadMe(config);
      }
      else { //If there’s not, let SP know the page is done loading
      g_pageLoadComplete = true
      }

      Thanks for all the help 🙂

    10. Hi,
      I’m glad you figured it out!

      Have you tried to call the script using “_spBodyOnLoadFunctionNames”?

      You use it like this:

      _spBodyOnLoadFunctionNames.push('init_initjLoadMe');

function init_initjLoadMe(){
   initjLoadMe(config);
}

      Alexander

    11. Yeah, I’ve been poking around since then and have settled on that method which is better than the footer. It adds a bit of load time onto the page, but it works so I can’t complain.

  18. So I think I figured out how to remove the created and modified by section. Change the if statement containing the hideCreatedAndModified argument to (at least for the first type of listBaseType===0, as I do not have the other form):

    if(argObj.hideCreatedAndModified){
    if(listBaseType===0){
    $(“#jLoadMe”).find(“.ms-formtoolbar:parent”).hide();
    }else{
    $(“#jLoadMe #onetidinfoblock1”).parent(‘table:eq(2)’).hide();
    }
    }

    1. The following also seems to work, although I do not know which is more efficient or better:

      $(“#jLoadMe”).find(“.ms-formtoolbar”).closest(‘table’).hide();

  19. Hi Alexander,

    Great post. Very useful.

    Is this works with WSS 3.0 also? Right now I am using this in MOSS 2007 with a custom list which has multiple content types. It’s displaying the popup only for few Items.

    Is there any change in the code.. If list having multiple content types.

    Please suggest

    Thanks,

    1. Hi, It will work in WSS3.0, but i have not tested it with multiple content types. I guess if you do NOT specify which fields to show – thus requesting the full DispForm, it will work.

      Alexander

  20. Hi,

    It is a great Post for me.

    I am facing a problem with this code. I have followed the steps and it is working fine when I add ‘ID’ column at last in the view. But when I add ‘ID’ column in just beginning of view, It shows me an error ‘[Tasks]
    The ID column must be in the view. If you select to hide it in this script, place it to the far right.’.

    Can you please help me resolve this problem?

    Thanks & Regards
    Gaurav

  21. I have downloaded the code and have everything working. However, when I add fields in arrOfFieldsToShow then the form labels are no longer displaying and the popup only displays the field data. I have hideFormLabel:false, which I would assume would ensure the form labels are displayed. Please let me know if I am still missing something.

    Thanks!
    Court

    1. Hi,
      Ensure you do NOT append # to the FieldInternalName.

      If this is not the case – please email me a screenshot of the CEWP code.

      Alexander

  22. Hi Alexandar,

    The pop up is not displying fully. If the content is large , at least it should dipslay the scroll bar. But the preview window is diaplying the half content .

    1. Hi,
      Try setting the width in the “config” object in the CEWP to stretch it out sideways, or limit the number of columns to display (using the “arrOfFieldsToShow” option).

      Having scrollbars will not help as the solution is rigged to hide the content when hovering.

      This in not intended to replace the “DispForm”.

      Alexander

  23. Hi Alexander

    This is really great post. I am using SharePoint 2010 and have applied this solution for “All Items” view of a custom list and it works fine but when I applied the same to Calendar view of the same list, it doesn’t work. When I place the mouse on the field on calendar view, it displays only the blank pop-up. I am using version v1.0.1 and jQuery v1.6.4 I have also tried with hoverImg:{active:false} but it didn’t help. Am I missing anything?

    Thanks
    AP

  25. Hi,

    Thanks for your quick reply.

    I tried with version (v1.3). But no luck. It shows only the blank pop up. Just to let you know, on the calendar, I am not displaying the “title” field but one of the list field and time is displaying by default with this field. So I gave the internal name of this list field for “prependTo:” attribute. Please let me know if you need more information. If it works on your end, can you please email me the code .

  26. Hello Alexander,
    Thank You very much for your work. I really appreciate it. I am using sp2010 and downloaded latest feature. I have a question, can we make a hover work for a specific column rather than in title column.

    For example

    I have

    Program, program status, program comments, Page, Page status, page comments.

    Columns in a sharepoint custom list. So when i hover over Program or a Page, i want it to popup items in program status and program comments in context of program. But when i hover over Page can i pop up page status and page copmments in a box.

    Is thsi functionality possible with our solution. If yes can you provide me place where i need to make adjustments.

    Thank You

  28. Hi, did you get a chance to diagnose what AP posted? I am having the exact same issue in SP2010 Enterprise calendar view. Just getting the blank hover bar. Tried everything listed here with no content showing.

    1. Hi,
      Yes, AP found that it was an error occurring when more than 5 items was listed in one day. I have not had the time to verify it yet, but it’s on the “stuff to do” list.

      Alexander

    2. Hi,
      I was mistaking regarding the cause of the “blank popup error”. Could you help us shed some light upon the reasons for this behavior?

      I have not been successful in recreating this bug.

      Alexander

    3. I have a single calendar with 9 overlays and 25 views (not that this should matter). There is a lot of content displayed at once which works great however this overlay would really help. I have the calendar embedded as a web part on a page. Right beside it I have a hidden CEWP which points to the 2010 CEWP code in a text file using the Content Link. That text file and the .js file are saved in a document repository. The text file has an absolute URL pointing to the .js file. When I hover over the calendar entries I get a very thin sliver of the overlay with no content in it. I’ve tried putting individual field names in the arrOfFieldsToShow with no luck. In fact, the sliver of overlay goes away completely when I do that but I could have my syntax wrong. Otherwise I made no changes to the code shown above except the path to the .js file.

      Hope this helps. Thanks so much for your advice and hard work!

    5. Sorry, but I have not been able to reproduce the error and without being able to see it “hands on” in a system experiencing this error, there is nothing I can do.

      If it were possible or me to log into your site end have a look, I might be able to pinpoint the cause.

      Alexander

    6. It’s working now. We have heavily customized the master page to not look out of the box. During the process other page templates were customized and we slowly rolled each one back to stock. That’s the only thing I can think of that has resolved it. The only issue now is the delay, it takes a couple seconds or so for the data to appear in the hover.

  29. I am not sure if everyone has had issues with this, but modifying the css of the jLoadMe does not actually change anything. That is, changing

    .css({‘position’:’absolute’,
    ‘left’:pX,
    ‘top’:pY,
    ‘background-color’:’#fafafa’,
    ‘border’:’2px solid #C3D940′,
    ‘padding’:3,
    ‘width’:contentWidth})

    did not actually result in changes.

  30. Thank You for you answer Alexander,
    One more question,In arrOfFieldsToShow i want to add column named First Name. How do i add that in to the array field, i looks like it only takes one word.

    It is taking Name but it is not taking First Name.

  33. Great post, but I’m having trouble downloading the PreviewMetadata.js file… clicking your link just takes me to a “internet explorer cannot display…” blank page. Is there anyplace else I could get the file?

    Thanks!

    1. Which browser are you using? It works for me with no issues on IE8. I did notice that it goes outside the box on Chrome, but then again, SharePoint in general doesn’t work well in Chrome.

  38. Excellent work as always, Alexander.

    I’ve added a parameter to the config – enableListView:false . In our situation we don’t want to see the metadata preview for list views, only calendar views. I’ve also customized the appearance to look somewhat like a post-it note. Works like a charm and our users love it!

    Trevor

  40. Is there a way to display the content of the pop up in a seperate CEWP instead? I would like to display the content in a fixed place for the user when they hover over a list item and can’t figure out how to achieve that.

    Thank you in advance.

    Daniel

    1. The content of the preview is placed in a container with ID “jLoadMe”. Look in the script for this container ID, and insert the ID of the container you want to use in stead. You will have to bypass the part of the script that positions the container “floating”, but this should be fairly simple.

      Alexander

  41. Maybe someone can help me here. I am working with MOSS 2007 and I have got the previewmetadata scipr working perfectly. Thanks Alexander by the way, excellent stuff as usual. I am using it to display contact numbers for technicians on a site. Problem is when they hover over the line item the number pops up but as soon as they move the mousze it goes away and they need to move the mouse to select their IP phone to make the call. I would like it to pop up onclick, and to go away onclick if at all possible. if so, how do I do this? Any help would be appreciated, I am new to Jquery and javascript so I do apologize for asking such a silly question to most of you.

    1. Hi,
      This code does not have support for what you ask, but you can play around with this bit of code found various places:
      $(“#jLoadMe”).html(”).hide();”

      If you comment it out, the preview will not disappear. I’m afraid I cannot promise any updates to this code.

      One question though – why not have the phone number visible in the view if this is what the users want to reach?

      Alexander

    2. Thanks Alexander, I will play around some more with this and see what I come up with. This list has hundreds of rows, with multiple visible columns (the phone numbers are not in the view, because it would look to cluttered). All that the popup displays is the phone numbers of both the primary technician and the backup technician, both office and cell numbers.

  42. I dont know if I’m doing something wrong but i just keep getting this skinny textbox with no content in it. I followed the code exactly and even added specific columns. Can I get some help on getting this to work correctly?

    config = {arrOfFieldsToShow: [‘Title’,’Location’],
    hideIdColumn: true,
    activeListGuids:[],
    hideCreatedAndModified: true,
    hideFormLabel: false,
    hoverDelay: 100,
    hoverImg:{active:true,
    path:’/_layouts/images/chm16.gif’,
    height:’12’,
    width:’12’,
    prependTo:’LinkTitle’,
    hoverImgDescription:’Hover over this image in the list to preview the list item’,
    openInDlg:true}};

    initjLoadMe(config);

  43. Replace this $(“#jLoadMe”).html(”).hide();
    with this:
    setTimeout(function(){$(“#jLoadMe”).html(”).hide();}, 3000);

    to set the time for the Preview popup

  44. Hi Alex,
    I’am using SharePoint 2010, I can’t to display tooltip with calendar using Custom Form with Infopath (displayifs.aspx), not default Display form. You can help me?
    Thanks,

  45. Hi Alex, I wonder if your script could me modified to fit my requirements. I need some urgent help to create some ECMA scripts for my project. I have an html map of europe with 39 countries marked out in hotspots. I have a SharePoint 2010 list with 3 fields; country, description, and url.

    I want to create an ECMA script to create a pop up with the country name and description when a user hovers over that country on the html map. I will be pasting this code into a Content Editor Web Part for use on my Intranet. I need to retrieve and filter the list data, then bind to the onmouseover event to trigger the pop up with the information.

    Can anyone help me with the script, I am new to Javascript. my HTML map code looks like this:

  49. Hi…your post is awesome,
    i exactly have the same requirement.however i dont from where to start. i have announcements list sp2010 webpart in the content editor webpart i added the script above referencing previewmetadata.js. with list id.
    do i need to add something more as i dont see any tool tip
    help would be really appreciated

    Thanks!!!!!!!!

  51. Hi, I have followed the instructions and all i get it s grey box…
    any thoughts? I am trying to display a multi-line text Description field. Using a custom list in SharePoint 2007. Please help it like Im almost there.

  52. Alex, thanks for the script! Tried it out on the calendar and I saw this: it only works if there is more than 1 entry on the same day, if there is only 1 entry the pop up is the standard SP one. Any idea on how to fix this?

  53. I was able to get this working in SharePoint 2007 Calendar View, but I would like to know if it is possible to adjust where the popup is showing at. It seems to be just a little different depending which way you begin to move your mouse over the event.

  54. I have the Preview (on hover) working pretty well on my SharePoint 2010 site for a custom list that I created and gave it a Calendar view. I updated my list view from the default display view to only show the columns I’m interested in. I wasn’t able to use the Calendar Overlay option (not sure if it was due to original list being a custom list I created), but I was still able to color-code events based on category I assigned them.

    The issue I run into, is that by default the calendar doesn’t expand all events, so if I click on “Expand” the preview script doesn’t work properly. When I scroll over, I only get the column title I chose to display as my default in Monthly view. If I refresh the page, with default events still collapsed (for days with more than 3 events) the preview option works fine. I’m sure it has to do with updating how the page is changed when I click on the “Expand” button, but not sure where to start.

    Any help?

  55. So I can get this to work when I set the hoverImg to false and the entire row becomes a link. what I can not do is get it to work with just the image. Any field that I use in the PrependTo will not give me an image to hover on. Any ideas?

  56. I am trying to figure out what may be a glitch. After reading through the comments I have done some testing on this and this is what I found. If you place the ID column on a list with many fields to the right then the HoverImage wors fine. Moving that ID column anywhere else and then the HoverImage only gives a blank box. For whatever reason this does not seem to be true when dealing with a small list. I have tested this on multiple 2007 iterations. My challenge is the client wants the ID column to be the second column.

    Also, if you do HoverImage false, then it does not seem to matter where the ID column is located at.

  57. On my page, when I close the pop up box for one item, then hover over to another item, the pop up box displays information for the previous item which I previously closed.. Anyone else have problems with this?

  58. Hi! I’ve been looking at this and the Preview item, on hover” tools for a SP 2010 Document Set. Although I can get them to work on non-document sets and the Preview “firsttd” option sort of works, I’m getting the empty / skinny box previously mentioned when using this preview metadata tool. It appears to get lost at the getLoadedFields function, which makes sense as the box is renderd but empty but my JQuery isn’t good enough for me to work out where the problem is. I’m guessing that the Document Sets are just sufficiently different, possibly with something different to “td.ms-formbody”. If anyone could take a look at the code here, we might be able to get this working
    Great tool though!
    Thanks
    Bill

  60. Hi Alexander,

    I want to hide the column ‘Attachments’ in the display form.
    But the function ‘Attachments#’ does not seem to work.

    arrOfFieldsToShow:[‘Target_x0020_Audiences’,’Attachments#’],

    Can you please assist?

  61. Hey,

    can anybody help me with my problem with this good script?

    In Firefox the script runs perfect but in IE8 – i see only a gray line without content…

    What can i do now?

  64. Hi Alex – many thanks for a superb solution. I have got this working on a customised list (SP2010) and very pleased with it.
    As with all things, once you start using it and see the value you also start to want it to do even more things….
    I would like to have this not tied to a row or a single image but instead various (5) columns. So that dependent on which column you hover over it displays a different form. Is there a way with the script that you can get it to go through an IF statement (or whatever the equivalent is in JS) or something similar to firstly check the column and then select the correct form based on the column?
    I was thinking about adding images to the 5 columns and then adding 5 CEWPs with different sets of code modified to show different forms but I imagine this would be grossly inefficient and slow down the page somewhat.
    Any thoughts / advice would be extremely welcome. Thanks again for the time in sharing this solution.

    I was wondering what the easiest way would be to enable

    1. Hi,
      I’m sorry for not replying – my inbox tends to pile up!

      Unfortunately I do not have the time to make this modification. I agree that adding the same code 5 times to a page would not be the answer, but without jumping into the code I cannot tell what would be the best approach.

      You might want to look at the latest version found here: https://spjsblog.com/2013/12/03/list-view-preview-item-on-hover/

      If I remember correctly, this will let you configure multiple fields – take a look and see what you make out of it.

      Alexander

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.