Пользовательский контент для каждой подсказки qTip - PullRequest
Новая
       3

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

1 голос
/ 24 марта 2011

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

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

Полагаю, это во многом из-за моего очень ограниченного знания 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 для каждой подсказки.

Мой подход неверен?

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

Ответы [ 2 ]

7 голосов
/ 24 марта 2011

вы можете опустить свойство содержимого, чтобы использовать заголовок тега <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

0 голосов
/ 25 марта 2011

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

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

или

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

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

...