2012-06-04 3 views
1

Я пытаюсь создать всплывающие подсказки из содержимого элемента DIV с помощью qTip + JQuery. Если я пытаюсь определить всплывающую подсказку со статическим содержимым, все, кажется, работает нормально. когда я пытаюсь использовать их внутри цикла for и получаю содержимое элемента DIV и пытаюсь отобразить его как подсказку, ничего не появляется. У меня есть следующий код внутри функции готовности документа. Свойство отображения устанавливается никому для класса «подсказки»qTip не показывает содержимое при использовании в каждом цикле

$.each($(".tooltip"), function (i, val) { 
      var theContent = $(val).html(); 
      $(val).qtip({ 
       content: $(val).html, 
       style: { 
        width: 200, 
        background: '#ebf1ff', 
        color: 'black', 
        textAlign: 'center', 
        border: { 
         width: 1, 
         radius: 4, 
         color: '#AACCEE' 
        }, 
        tip: 'bottomLeft', 
        name: 'dark' 
       } 
      }); 
     }); 

Моих HTML тегов выглядит как-то ниже:

<div class="vBarContainer"><div id="gantt_65_1" class="gantt" style="border-width:medium;border-color:black;background:orange;width:6%;margin-left:0%;">0</div><div class="tooltip">Quantity:15453</div></div> 

Может кто-то момент мне как то, что я мог бы делать неправильно?

Спасибо, Г.ДЖАВИД

+1

Может jsFiddle демонстрация? Разработчик qTip предоставляет [ссылку на пустой jsFiddle с включенным qTip] (http://jsfiddle.net/craga89/fDavN/). – Sparky

+0

Мне удалось заставить его работать, используя свойство sibling для div, охватывающего класс gantt. – user320587

+1

@ user320587 не редактируйте свой вопрос с помощью своего решения, пожалуйста, положите свое решение в качестве ответа и проверьте свой собственный ответ как решение. – Neysor

ответ

1

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

$('.gantt').each(function() { 
     $(this).qtip({ 
      content: $(this).siblings('div.tooltip').html(), 
      style: { 
       width: 200, 
       background: '#ebf1ff', 
       color: 'black', 
       textAlign: 'left', 
       border: { 
        width: 1, 
        radius: 4, 
        color: '#AACCEE' 
       }, 
       tip: 'bottomLeft', 
       name: 'dark' 
      }, 
      position: { 
       corner: { 
        target: 'topMiddle', 
        tooltip: 'bottomLeft' 
       } 
      } 
     }); 
    }); 
+0

У меня была аналогичная проблема, и это решение работало :) Большое спасибо! – Erik

Смежные вопросы