small description window on mouse hover on hyperlink

Question

Hi

i have a sharepoint custom list and we have 2 columns in there URL and description. i have a list webpart which shows all the URLs from the sharepoint list. But when i mouse hover on the link i would like to show description for that link in a small window. Can anyone please help me implementing this using jquery. Jquery should be able to read the description from list. Please let me know if something is not clear.

Answer 1

All you need is a tooltip plugin. Jquery Tools overlay is a good one to do such tool tips. There are lot of other tool tip plugins available.

Answer 2

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 here

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"&gt;&lt;/script&gt;          
<script type="text/javascript">                                         
  $(document).ready(function() {
    $('a').hover(
      function () {
        $('#divDescription').show();
      }, 
      function () {
        $('#divDescription').hide();
      }
   );
  });                                 

Read some tutorials on how to get 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"&gt;&lt;/script&gt;          
<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 parent and 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.