Multiple HTML lines with jquery tooltip plugin

问题:

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>

The showBody property seems applicable only to title attributes.

Found the problem

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

My original code was

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

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>"       
      );
}

回答1:

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>

And use the bodyHandler method to load custom content:

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