jquery qtip2 - несколько подсказок для одной цели? - PullRequest
Новая
       22

jquery qtip2 - несколько подсказок для одной цели?

3 голосов
/ 11 марта 2011

Я использую 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>

Теперь я хочу открыть другую подсказку, когда кто-то нажимает на эту ссылку. Также указатель мыши должен также закрыться. Я просто делаю это с помощью jquery .click, или я должен делать это каким-то другим способом, или, возможно, qtip имеет какой-то способ сделать это?

Спасибо

Ответы [ 2 ]

3 голосов
/ 11 марта 2011

Nevermind.Я сам разобрался с решением.

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!"
    }));
  });
0 голосов
/ 30 июня 2014

Возможно, решение изменилось с последней версией qTip2.Чтобы несколько qTips работали на одной цели, мне нужно было добавить параметр overwrite: false ко второму qtip.

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

...