Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I have a requirement in which when ever user hover over a text(hyperlink) a tool-tip should appear that should contain images which are clickable using JQuery

$('.cover_beholder').hover(
  function () {
      $(this).find('.dropdown').toggle();
  });
});

above is JQuery and below CSS

.cover_beholder 
{
display:inline;
}

.cover_beholder div
{
   display:inline;
 }

.dropdown 
{   
Border:1px solid gray;
margin:-4px 0 0 37px;     
display:none;
position:absolute;
z-index:999999;
background-color:White ;
width:140px;
padding:5px;

}

.dropdown img
{
    border:0px;

}

.dropdown li
        {       
            display:inline;
            padding-right:2px;

        }  

I want to make .drop-down should be as a mouse tooltip and images in the tool tip are hyperlink which need to be clicked . Now My question do we have any mouse Hover tool-tip which contains images as hyperlink

share|improve this question
    
How is this a SharePoint question? –  Dave Wise Dec 14 '12 at 18:20
    
I need to this inside a share-point visual webpart –  raky Dec 14 '12 at 18:25
    
please be more precise about your problem. So, is your problem about including jquery (and a tooltip-script) to a visual webpart? Or getting images from list? Or... see my point? Then please tell us what you're trying (code examples ftw) or where you encounter your problem and we might be able to help you. –  Dominik Dec 14 '12 at 19:07
add comment

3 Answers 3

Is your question on actually setting the tooltip, or making the images clickable within the tooltip? I personally like the qTip2 plugin for tooltips.

You can bind an event to each tooltip like $(".dropdown").on("img", "click", function() { do something });. What I ususally do for something like this is add a data attribute to the image, something like data-clickurl that contains the URL I want the user to go to when they click on the image. Then you can use something like $(".dropdown").on("img", "click", function() { window.location=$(this).attr("data-clickurl"); }); to send the user to that URL when they click the image.

share|improve this answer
add comment

try jquery ui 1.9.x tooltip module.

share|improve this answer
add comment

Without really knowing a lot about what you are having issues with here is some generic information.

You can include a reference to the jquery js and any plugins using a sharepoint script link. Similar to this (modify path accordingly).

<SharePoint:ScriptLink ID="jQuery" runat="server" Name="/jquery.min.js" />

It is also a good idea to create your own namespace so you can be sure you are targeting your code and not something else already existing in SP.

Here is a link to a jquery plugin that will help with tooltips, a google search will also help you find a bunch of others.

Maybe post some of the HTML etc and we can answer more specificly.

share|improve this answer
    
Can you provide some examples –  raky Dec 17 '12 at 17:47
    
Looks like your sytax might be off... see this jsfiddle.net/SNRb3/1 for a modified version... –  BlueBird Dec 17 '12 at 18:35
    
Thanks can you give any examples –  raky Dec 17 '12 at 18:54
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.