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

我有一个搜索结果列表，并且我希望能够在工具提示中显示有关结果的更多信息。每个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并显示或类似的内容吗？

来源

2011-03-24 Tofuwarrior

可以省略的内容属性设置为使用<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

来源

2011-03-24 13:23:28 felixsigl

嗨，这真的很有帮助，谢谢你花时间向我解释这一点。我唯一的问题是，我需要能够点击这些链接以及有悬停的工具提示，所以href不能是#foo。这可能吗？ – Tofuwarrior 2011-03-30 10:19:51

只需使用另一个属性，如'rel'，其中包含内容的编号 – felixsigl 2011-03-31 12:22:19

确定谢谢，我会试试这个。 – Tofuwarrior 2011-04-06 10:00:24

添加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。

来源

2011-03-25 05:26:08

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

回答

相关问题