3

jqueryqtip2を使用してマウスオーバー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を同じターゲットで機能させるには、2番目のqtipにoverwrite：falseオプションを追加する必要がありました。

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

于 2014-06-30T08:45:07.000 に答える