每个 qTip 工具提示的自定义内容答案

【问题标题】：Custom content for each qTip tooltip每个 qTip 工具提示的自定义内容
【发布时间】：2011-06-16 06:58:50
【问题描述】：

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

当我翻转每个元素时，我已经获得了一个 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 并显示或类似的东西？

【问题讨论】：

标签： jquery qtip

【解决方案1】：

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

【讨论】：

嗨，这真的很有帮助，感谢您花时间向我解释。我唯一的问题是我需要能够单击这些链接以及悬停时有一个工具提示，因此href不能是#foo。这可能吗？
只需使用另一个属性，例如 rel，其中包含内容 div 的 id
工作得很好，非常感谢您的帮助。在这个过程中我也学到了更多关于 jquery 的知识。
我想我已经做到了。抱歉，对本网站的这方面不熟悉。

【解决方案2】：

将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 属性是standard in HTML 5 for all DOM elements。

【讨论】：