带有jquery工具提示插件的多行HTML [英] Multiple HTML lines with jquery tooltip plugin

问题描述

我正在使用插件 http://bassistance.de/jquery- plugins/jquery-plugin-tooltip/可以使用JQuery创建工具提示，但是我无法创建包含3行(或更多行)HTML代码的工具提示.

I'm using the plugin http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ to create tooltips with JQuery but I can't created tooltips containing 3 (or more) lines of HTML code.

我需要呈现如下所示的内容作为工具提示(显然，内容是动态生成的，这仅仅是概念上的证明)

I need to render as tooltip the content shown below (obviously the content is generated dynamically an this it only a proof of concept)

<p>Line1</p>
<p>Line2 <span style="...">blah blah</span></p>
<p>Line3</p>

showBody属性似乎仅适用于标题属性.

The showBody property seems applicable only to title attributes.

发现问题

显然jquery.html("...")需要一个根标签，否则会生成一个空字符串.

Apparently jquery.html("...") requires a root tag otherwise generates an empty string.

我的原始代码是

bodyHandler: function() {
  return $("<span id='caption'>line1</span>"
         + "<span id='tags'>line2</span>");
}

需要用JQuery删除的虚拟根标记编写

need to be written with a dummy root tag removed by JQuery

bodyHandler: function() {
  return $(
        "<root-dummy-tag>"
        + "<span id='caption'>line1</span>"
        + "<span id='tags'>line2</span>"
        + "</root-dummy-tag>"       
      );
}

推荐答案

如果为您要呈现的HTML创建一个钩子:

If you create a hook for the HTML you'd like to render:

<a href="#" id="tt">Tooltip</a>

<div id="tooltip-content">
  <p>Line1</p>
  <p>Line2 <span style="...">blah blah</span></p>
  <p>Line3</p>
</div>

并使用bodyHandler方法加载自定义内容:

And use the bodyHandler method to load custom content:

$("#tt").tooltip({ 
    bodyHandler: function() { 
        return $("#tooltip-content").html(); 
    }, 
    showURL: false 
});

这篇关于带有jquery工具提示插件的多行HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！