Пользовательский контент для каждой всплывающей подсказки qTip

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

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

Я думаю, это во многом из-за моих очень ограниченных знаний jQuery.

В старом стиле JavaScript я бы передал переменную, которая была содержимым всплывающей подсказки из вызова функции, прикрепленной к тегам <a>. Поскольку в теге <a> для всплывающей подсказки jQuery нет вызова функции, похоже, это не способ делать это сейчас.

На данный момент у меня в голове такое:

<script type="text/javascript" 
       src="/assets/templates/unaexchange/js/jquery.qtip-1.0.0.min.js"></script>

<script>
$(document).ready(function() {
$(".tooltip").qtip({
   content: 'this is the content',
   position: {
      corner: {
         target: 'topRight',
         tooltip: 'bottomLeft'
      }
   }
});
});

А то у тела <a class="tooltip">Link</a> и то у меня эталон:

<div class="qtip qtip-stylename">
  <div class="qtip-tip" rel="cornerValue"></div>
  <div class="qtip-wrapper">
    <div class="qtip-borderTop"></div> 
             <!-- Only present when using rounded corners-->
    <div class="qtip-contentWrapper">
        <div class="qtip-title"> 
             <!-- All CSS styles...-->
        <div class="qtip-button"></div> 
             <!-- ...are usually applied...-->
    </div>
    <div class="qtip-content">an attempt at standard content ?></div> 
             <!-- ...to these three elements!-->
  </div>
  <div class="qtip-borderBottom"></div> 
             <!-- Only present when using rounded corners-->
  </div>
</div>

Но это не отображается, и я не знаю, как создать определенный фрагмент HTML для каждой всплывающей подсказки.

Мой подход неправильный?

Должен ли я создавать все отдельные всплывающие подсказки, содержащие настраиваемый контент с отдельными идентификаторами, а затем выбирать эти идентификаторы и отображать или что-то в этом роде?


jquery qtip
person Tofuwarrior    schedule 24.03.2011    source источник

Ответы (2)


arrow_upward
7
arrow_downward

вы можете опустить свойство content, чтобы использовать заголовок тега <a>:

// use title attribute
$(".tooltip").qtip({
    position: {
        corner: {
            target: 'topRight',
            tooltip: 'bottomLeft'
        }
    }
});

или вы можете использовать селектор jquery. Например:

// use jquery selector
$(".tooltip2").each(function() {

    var content = $($(this).attr("href")).html();

    $(this).qtip({
        content: content,
        position: {
            corner: {
                target: 'topRight',
                tooltip: 'bottomLeft'
            }
        }
    });
});

Пример здесь: jsFiddle

person felixsigl    schedule 24.03.2011
comment
Привет, это действительно полезно, спасибо, что нашли время объяснить мне это. Моя единственная проблема с этим заключается в том, что мне нужно иметь возможность нажимать на эти ссылки, а также иметь всплывающую подсказку при наведении, поэтому href не может быть #foo. Было бы это возможно? - person Tofuwarrior; 30.03.2011
comment
просто используйте другой атрибут, например rel, содержащий идентификатор содержимого div - person felixsigl; 31.03.2011
comment
Работал дышать, большое спасибо за помощь. В процессе я тоже узнал немного больше о jquery. - person Tofuwarrior; 06.04.2011
comment
Думаю, я сделал это сейчас. Извините, что вы новичок в этом аспекте этого сайта. - person Tofuwarrior; 28.04.2011

arrow_upward
0
arrow_downward

Добавьте атрибут title к каждому элементу DOM с нужным содержимым всплывающей подсказки. Например.,

<span class='tooltip' title='This will show up as a tooltip'>Whatever your markup happens to be</span>

or

<a class='tooltip' href='#' title='Another tooltip'>Some link</a>

Атрибут title является стандартом в HTML. 5 для всех элементов DOM.

person A Lee    schedule 25.03.2011