jquery - 每个qTip工具提示的自定义内容

我有一个搜索结果列表，对于每个搜索结果，我希望能够在工具提示中显示有关该结果的更多信息。

我已经获得了一个qTip工具提示，当我将每个元素翻转时，却不知道如何将自定义内容添加到每个结果的工具提示中。

我猜这很大程度上是因为我对jQuery的了解非常有限。

在旧式JavaScript中，我将传递一个变量，该变量是附加到<a>标记的函数调用中工具提示的内容。由于在jQuery工具提示的<a>标记中没有编写任何函数调用，因此看来这不是现在的方法。

目前，我对此有疑问：

<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块。

我的方法错了吗？

我是否应该创建包含自定义内容的所有单独工具提示并使用单独的ID，然后选择并显示这些ID或类似的内容？

最佳答案

您可以省略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

关于jquery - 每个qTip工具提示的自定义内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5419560/