jQueryTools要求将工具提示的div放在触发器元素(li)之后——document验证失败

Question

下面是如何使用工具提示的jQueryTools演示页面:http://flowplayer.org/tools/demos/tooltip/any-html.html

基本上，如果你想有一个包含HTML的工具提示，你必须把HTML放在一个div中，并把它直接放在触发器元素后面，像这样:

<a href="http://www.stackoverflow.com" id="link1">
<div class="tooltip">
   <img src="img/SOicon.png">stack<span style="font-weight:bold">overflow</span>
</div>

但是我的触发元素不是<a href="http://www.stackoverflow.com" id="link1">。它是一个<li>，我猜我不能在母体<ul>中除了<li>以外的任何东西。换句话说，我不能像我应该的那样把触发器元素放在后面。

我已经想出了一种方法来解决这个问题(用浮动的<li> s取消无序列表并切换到浮动div)，但我认为我应该在开始解决问题之前咨询专家(当然是你们!)。

你们怎么解决这个问题?

Answer 1

使用结构外的其他元素作为工具提示目标是没有问题的!

<ul id="mylist">
    <li title="List Point 1">List Point 1</li>
    <li title="List Point 2">List Point 2</li>
    <li title="List Point 3">List Point 3</li>
</ul>
<!-- many other HTML ELements -->
<div id="mylist_tooltip"></div>

最后输入jQuery的ready():

jQuery("#mylist li").tooltip({
    // target div
    tip: '#mylist_tooltip'
});

在文档中阅读更多;-)