jQuery qtip() - how to get the id from mouseover, .$load()

Question

I have the Jquery qtip() function and i need to get the id when mouseover a link. Can i'm using jquery .load() to get the page. Cant able to get using below code. Anyone know?

Below is my script

$(function () {
      $(".cabinlink").qtip({
content: $("#loadCabin").load("/mysite ." + $(this).attr('id')),

                 show: 'mouseover',
                 hide: 'mouseout',

                 style: {
                     width: 780
                 },
                 position: {
                     corner: {
                         target: 'LeftBottom',
                         tooltip: 'TopLeft'
                     }
                 }
             });
         });

.cabinlink is the mousehover link

<a id="1" href="javascript:void(0)" class="cabinlink" />
<a id="2" href="javascript:void(0)" class="cabinlink" />
<a id="3" href="javascript:void(0)" class="cabinlink" />

loadCabin is the div to open up the qtip box

<div id="loadCabin"></div>

Amended codes, able to work but need to mouse over two times. first mouseover no result. Anyone know?

 $(function () {
         $(".cabinlink").live('mouseover', function () {

             var id = $(this).attr('id');
             var url = "/Mysite ." + id;
             $(this).qtip({
                 overwrite: false,
                 content: $("#loadCabin").load(url),
                 show: { ready: true, when: false },
                 hide: 'mouseout',
                 style: {
                     width: 780
                 },
                 position: {
                     corner: {
                         target: 'LeftBottom',
                         tooltip: 'TopLeft'
                     }
                 }

             });
         });

     });

I don't know the qtip API well enough to answer your question, but I can tell you that you're not getting the ID where you expect because "this" is referring to the options object you're passing to qtip, not to the element that was hovered over. I imagine that one of the options to qtip lets you pass a callback function from which your call to $(this).attr('id') would return the element's ID as you expect. — Matt Browne, Mar 06 '13 at 03:03
In addition to that, you need to consider the timing...$(".cabinlink").qtip(...) runs as soon as the page loads, and just tells it to initialize with the given options. Later, hover events are handled by qtip, and it's only then that you'd even know which element was hovered over. — Matt Browne, Mar 06 '13 at 03:08
@Blender It's indeed best to avoid IDs starting with numbers (only HTML5 allows them and they still should be avoided), but that's not what's causing the problem here — Matt Browne, Mar 06 '13 at 03:11
@Blender Truth be told I just found out myself. Your comment prompted me to look it up since I had never had an urge to begin an ID with a number and wasn't aware of the rule. More info here: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Matt Browne, Mar 06 '13 at 03:33
BTW the live() method is deprecated. Use on() instead: http://api.jquery.com/on/ — Matt Browne, Mar 08 '13 at 12:33

score 0 · Answer 1 · answered Mar 06 '13 at 03:38

0

Try this:

$(".cabinlink").qtip({
    onShow: function() {
        $("#loadCabin").load("/mysite." + $(this).attr('id'))
    },

     show: 'mouseover',
     hide: 'mouseout',

     style: {
         width: 780
     },
     position: {
         corner: {
             target: 'LeftBottom',
             tooltip: 'TopLeft'
         }
     }
 });

If that doesn't work, one of the other callback functions may...see http://craigsworks.com/projects/qtip/docs/api/#callbacks

answered Mar 06 '13 at 03:38

Matt Browne

12,169
4
59
75

can't able to get it work on your codes. I have amended the codes as above, It seems to work that ways, but problem now is i need to mouseover two time this time. First mouseover doesn't appear anything. Any Idea – Complicated Huang Mar 08 '13 at 08:15
It looks like you may need to handle the mouseover event yourself and then use the updateContent method of the qtip API as shown here: http://stackoverflow.com/questions/6879907/jquery-ajax-and-qtip-dynamic-content. Note that you'll need to use the $.get or $.ajax method rather than $.load to use this approach. – Matt Browne Mar 08 '13 at 12:29
Actually I think your situation is different from the one in the link; there may be an easier solution, I'll post back here if I think of it. – Matt Browne Mar 08 '13 at 12:39
Forget my previous comments (you don't need your own mouseover() handler); try this instead: http://stackoverflow.com/a/2297936/560114 (note that I linked to a specific answer; the accepted answer of that question is incorrect). – Matt Browne Mar 08 '13 at 12:47

jQuery qtip() - how to get the id from mouseover, .$load()

1 Answers1