Jquery clickable Tooltip inside SharePoint WebPart

Question

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

Answer 1

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.

Answer 2

try jquery ui 1.9.x tooltip module.

Answer 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.