Geek asks and answers

JQuery qtip2 - multiple qtips for one purpose?

I am using jQuery qtip2 to create a qipip mouseover. Here is the code:

$(document).ready(function() {
  $("#optionalProdsImgPreview_1").qtip({
      content: "<img src='http://mysite.com/myimg.jpg' width='100' height='150' />",
        show: {
          solo: true
        },
        hide: {
          delay: 400,
          fixed: true,
          event: "mouseout"
        },
        style: {
          tip: {
            corner: "rightMiddle"
          },
          classes: "ui-widget-content"
        },
        position: {
          adjust: {
            x: -18,
            y: 0
          },
          at: "left center",
          my: "right center"
        }
    });
  });

This basically opens the preview image when the mouse is over the link, for example:

<a href="#" id="optionalProdsImgPreview_1">My great product here</a>

Now what I want to do is open another qtip when someone clicks on this link. Qipip for the mouse should also be closed. Am I just doing this using jquery.click or should I do it using some other method or maybe qtip has some way to accomplish this?

thank

+3
source share
2 answers

Nevermind I myself understood this decision.

http://craigsworks.com/projects/qtip2/tutorials/advanced/#multi

Here is my complete code:

$(document).ready(function() {
  $("#optionalProdsImgPreview_1").qtip({
      content: "<img src='http://mysite.com/myimg.jpg' width='100' height='150' />",
        show: {
          solo: true
        },
        hide: {
          delay: 400,
          fixed: true,
          event: "mouseout"
        },
        style: {
          tip: {
            corner: "rightMiddle"
          },
          classes: "ui-widget-content"
        },
        position: {
          adjust: {
            x: -18,
            y: 0
          },
          at: "left center",
          my: "right center"
        }
    })
    .removeData('qtip')
    .qtip( $.extend({}, shared, {
       content: "My New Content is HERE!"
    }));
  });
+3
source

qTip2. qTips , overwrite: false qtip.

http://qtip2.com/options#core.overwrite

0

More articles:


All Articles