SharePoint - How to show pop up window contents when mouse over on a hyperlink

Asked By dinesh on 09-Oct-12 01:22 AM
Hi friends,

        I have a grid in SharePoint 2010. In that grid there are hyperlinks upon clicking which a pop up window is opened. My requirement is when i mouse over the link a box should be shown with contents of that pop up window dynamically. How can this be done...

With Regards,
Dinesh
Danasegarane Arunachalam replied to dinesh on 09-Oct-12 03:27 AM
How to create a POPUP in sharepoint

http://planetparker.com/blog/Lists/Posts/Post.aspx?ID=56
Ravinder Jamgotre replied to dinesh on 19-May-16 07:41 AM

You have two options for doing something like that :

  1. In your list webpart, you show your URLs as your already do, but you also create divs for your description, you just hide them. Them, on hover, you show the information using jQuery (jQuery Tools Overlay or Tooltip or something like it will do)

  2. If your description is big, or if you have a lot of elements in your list, you might want to use AJAX / SharePoint list web service to achieve this. It is a bit trickier but might be worth it.

You can find more details about this method http://weblogs.asp.net/jan/archive/2009/05/06/querying-sharepoint-list-items-using-jquery.aspx

EDIT:

You could use jQuery to show your div very easily. Put the following markup in your code :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>          
<script type="text/javascript">                                         
  $(document).ready(function() {
    $('a').hover(
      function () {
        $('#divDescription').show();
      }, 
      function () {
        $('#divDescription').hide();
      }
   );
  });                                 

 

Read some tutorials on how to http://docs.jquery.com/Tutorials%3aGetting_Started_with_jQuery.

EDIT 2:
I'm assuming that you have markup like this :

<div>
  <a>Your First link</a>
  <div id="divDescription">Your First Description</div>
</div>
<div>
  <a>Your Second link</a>
  <div id="divDescription">Your SecondDescription</div>
</div>
...

Instead, you should do something like :

<div>
  <a>Your First link</a>
  <div class="description">Your First Description</div>
</div>
<div>
  <a>Your Second link</a>
  <div class="description">Your SecondDescription</div>
</div>
...

Notice how I use a class instead of an ID for the description div.

Then, in your javascript :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>          
<script type="text/javascript">                                         
  $(document).ready(function() {
    $('a').hover(
      function () {
        $(this).parent('div').find('.description').show();
      }, 
      function () {
        $(this).parent('div').find('.description').hide();
      }
   );
  }); 

You need to understand what you are doing with jQuery in order to make this work. When you do $("#divDescription").show(); you are selecting all the divs with the ID "divDescription" and showing them. Read more about the http://api.jquery.com/parent/ and http://api.jquery.com/find/ functions. I really recommend that you read up on javascript and jQuery to gain a better understanding of how it works. There are tons of tutorials online that will help you with that.