QTip2 Multiple Elements, Same Tooltip

Question

У меня есть страница, на которой я динамически создаю элементы, которым нужны всплывающие подсказки.

Я пробовал несколько разных подходов и смотрел онлайн, чтобы получить некоторые ответы безрезультатно.

В настоящее время, у меня есть это:

var $links = $('a.link'); 
var len = $links.length; 
for(var i = 0; i < len; i++){ 
    var $ele = $($links[i]); 
    $ele.qtip({ 
     id: 'editLink', 
     overwrite: false, 
     content: { 
      text: $linkEditor, 
      title: { 
       text: 'Edit Link', 
       button: true 
      } 
     }, 
     position: { 
      my: 'top center', 
      at: 'bottom center', 
      viewport: $(window) 
     }, 
     show: { 
      event: 'mouseover', 
      solo: true 
     }, 
     hide: false, 
     style: {classes: 'ui-tooltip-shadow ui-tooltip-red'} 
    }); 
} 

То, что я ищу какой-то способ, чтобы все эти элементы использовать один и ту же подсказку. Я хочу, чтобы все они использовали то же содержимое (в данном случае одну форму) и ссылались на всплывающую подсказку точно так же (с помощью элемента tooltip с идентификатором «ui-tooltip-editLink»).

С помощью того, что у меня есть, оно в настоящее время создает первую подсказку правильно, но если я добавлю новый элемент и переопределяю всплывающие подсказки, он создаст совершенно новую всплывающую подсказку с другим идентификатором для нового элемента.

Кто-нибудь знает какой-то способ выполнения нескольких элементов, такой же подход всплывающей подсказки?

Answer 1

Чтобы использовать qtip в динамически создаваемом элементе, вам необходимо включить qtip во время инициализации элемента.

например.

$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"}); 

Answer 2

К сожалению, нам нужно клонировать элемент Tooltip для каждого элемента наведения/щелчка.

Craig упоминает об этом в вопросе GitHub: https://github.com/Craga89/qTip2/issues/173

Answer 3

Я понял, как иметь один подсказку ДИВ быть разделена многими подсказкой изображений, если кто-то находит его под рукой

$(".tooltipBearing").qtip({ 
          content: { 
           text: $("#tooltipDiv").html() 
          }   
         }); 

Если вы не в состоянии положить .html() там, вы увидите общую подсказку показать один раз, а затем, когда вы включите его с другого изображения, он больше не будет работать на первый ...

tooltipBearing - это набор классов на некоторых изображениях на странице.

tooltipDiv - это идентификатор div, содержащий содержимое всплывающей подсказки.

Answer 4

Это то, что я сделал. Я привязал свою подсказку к уникальному элементу. И тогда все мои другие элементы, которые нуждаются в таком же подсказке будет просто вызвать отображение всплывающей подсказки уникального элемента:

$('#unique-element').qtip({ 
    content: {text: 'My Tooltip'}, 
}); 

$('.other-elements').click(function(){ 
    $('#unique-element').qtip('show'); 
}); 

Тем не менее, все ваши подсказки будут отображаться в фиксированном положении. Это не было проблемой в моем случае, потому что я использовал всплывающую подсказку как модальную. Вам нужно будет управлять позицией всплывающей подсказки с помощью меток event.

Answer 5

Основываясь на the answer of user738048 мой рабочий раствор, как это:

$('[data-tooltipid]').each(function() { 
    var ttid = $(this).data('tooltipid'); 
    $(this).qtip({ 
     content: { 
      text: $('#'+ttid).html(), 
     }, 
     position: { 
      my: 'top left', 
      at: 'bottom left', 
      target: $(this) 
     } 
    }).removeAttr('href').removeAttr('onclick'); 
}); 

В моем случае, идентификатор HTML-элемента, содержащего текст взят из атрибута data-tooltipid; мои атрибуты href и onclick удаляются, так как они устарели всплывающей подсказкой.