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

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
– Dominik, Commented Dec 14, 2012 at 19:07

BlueBird · Accepted Answer · 2012-12-14 21:02:49Z

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.

answered Dec 14, 2012 at 21:02

BlueBird

1,8603 gold badges17 silver badges28 bronze badges

Can you provide some examples

raky
– raky

2012-12-17 17:47:46 +00:00
Commented Dec 17, 2012 at 17:47
Looks like your sytax might be off... see this jsfiddle.net/SNRb3/1 for a modified version...

BlueBird
– BlueBird

2012-12-17 18:35:10 +00:00
Commented Dec 17, 2012 at 18:35

Add a comment |

Shawn · Accepted Answer · 2012-12-17 01:24:02Z

0

try jquery ui 1.9.x tooltip module.

answered Dec 17, 2012 at 1:24

Shawn

18412 bronze badges

Add a comment |

webdes03 · Accepted Answer · 2014-06-08 14:06:30Z

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.

Stack Exchange Network

Jquery clickable Tooltip inside SharePoint WebPart

3 Answers 3

Your Answer

Hot Network Questions

Jquery clickable Tooltip inside SharePoint WebPart

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions