3

我正在使用 jquery qtip2 创建鼠标悬停 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 有一些方法可以做到这一点？

谢谢

4

2 回答 2

3

没关系。我自己想出了解决方案。

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!"
    }));
  });
于 2011-03-11T06:55:53.263 回答
0

该解决方案现在可能已随着最新版本的 qTip2 发生变化。为了让多个 qTips 在同一个目标上工作，我必须将 overwrite:false 选项添加到第二个 qtip。

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

于 2014-06-30T08:45:07.000 回答