jquery qtip2 - 同一目標的多個qtips？

Question

我正在使用jquery qtip2創建一個mouseover qtip ..這里有代碼：

$(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"
        }
    });
  });

當鼠標懸停在以下鏈接上時，這基本上會打開預覽圖像：

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

現在我想要做的是當有人點擊該鏈接時打開一個不同的qtip。 鼠標懸停qtip也應該關閉。 我是通過jquery .click做的，還是應該通過其他方法做到這一點，或者qtip有什么方法可以實現這一點？

謝謝

Answer 1

沒關系。 我自己想出了解決方案。

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

這是我的完整代碼：

$(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!"
    }));
  });

Answer 2

現在，解決方案可能已使用最新版本的qTip2進行了更改。 為了讓多個qTips在同一個目標上工作，我必須在第二個qtip中添加overwrite：false選項。

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