Thursday, 15 July 2010

JQuery plugin qTip2 - Click-to-show only works on the first element the first time -


I have a page in which it has some DIV. Whenever a DIV is clicked, I want to show a qTip2 I am working with qTip due to some other things, if possible, I want to use it more than once.

Therefore, I used the QTip2 demo as a starting point and as far as I can tell that I have repeated it properly though there is a problem here: it only shows qtip on the first element Clicked - for the first time. It will show on all the other elements several times as often as you want to click on them, but for the first time only for the first time

Has anybody tried and followed it?

Here is the code for a sample app that I created that demonstrates the problem:

CSS:

  #container {border: 1px solid black; } #Container & gt; DIV {float: left; Border: 2px introduced silver; Margin: 5 px; } #Container & gt; DIV: nth-last-child (1) {float: none; Border: None; Height: 1px; Hidden flurry; Margin: -1 pixel 0 0 0;}   

javascript:

  var container; Var container and item; $ (Document) .ready (function () {container = $ ('# container'); if (container.label == 0) {warning ("container not found!"); Return;} var addLinks = $ (' .tipTarget '); $ (' 
test & lt; / div & gt; '). Qtip ({content:' test ', position: {goal:' mouse ', // Adjust positioning goal by using: {mouse: false, method: 'flip'}, my: 'left center', at: 'right center', effect: true // enable default 'slide' position animation}, show : {Target: addlinks, event: click ', delay: 0}, hide: {event:' someone Yes}}, event: {show: function (event, API) {// every show var tool = $ (event.originalEvent. Target); if (target.length) {api.set ('content.text', ' Looking at: '+ target.text ());}}}});});

HTML:

  & lt; Div id = "container" & gt; & Lt; Div id = "apples" class = "tiptarget" & gt; Apple & lt; / Div & gt; & Lt; Div id = "watermelon" class = "tip target" & gt; Watermelon & lt; / Div & gt; & Lt; Div id = "pitchis" class = "tip target" & gt; Peaches & lt; / Div & gt; & Lt; Div id = "meat" class = "tiptarget" & gt; Meat & lt; / Div & gt; & Lt; Div id = "clear" style = "clear: both" & gt; & Amp; Nbsp; & Lt; / Div & gt; & Lt; / Div & gt;   

JQuery: 1.8.3

qTip2: 2.0.1

There is a JSFDial with this exact setup:

Note that if you start the apple, watermelon, then peaches, then apple, watermelon, then clicking on peaches and repeating that the apple will first show the tip. Until the cows come home they will be shown to others.

Note that if you start with fresh and turbulan, it will only appear for the first time, but the rest will show every time.

What have I done?

(And I have already tried to use "every" construct - this behavior does not change at all)

Thank you!

I got something when editing my code. If you change your code to:

  Adjust: {mouse: true, method: 'flip'},   

tool tip works fine

No comments:

Post a Comment