jquery ui工具提示，显示列表工具提示

我有一个要在工具提示中显示的数据数组。尽管如此，工具提示似乎只需要一个长字符串输入。我用逗号加入了数组，但当我发送它时，我想将它显示为一个列表，而不是一个长字符串

以下是我的情况的一个例子：

在我的控制器中：

$scope.data = ["foo","bar","fubar"];

在模板中：

<label for="test">
    <input tooltip id="Test" type="text" title="{{data.join()}}">
</label>

基本上，在我的工具提示中，我想要一个类似以下内容的渲染版本的列表：

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>fubar</li>
</ul>

福
酒吧
伏巴舞

我只需要调整工具提示处理程序以添加自定义HTML

$("#test").tooltip({
    content:function(){return $(this).attr('title');},
});

然后在数组上使用

.join（'
'）

有关更多信息，请参阅

---

看看这个。

不久前我遇到了类似的问题，我做了一个快速演示：

基本上，您只需使用以下jQuery创建自己的工具提示。当我遇到问题时，我读到了这项技术，我会努力找到调味汁

HTML:

<div id='foo'>Foobar</div>

---

}

也许可以加入

s？或者

\r\n

s？我试过了，但结果是foo
，bar
，fubar
你能给我们一个吗？加入

\r\n

s。看这个。

<div id='foo'>Foobar</div>

 var tooltipPosition = function (event, x, y) {
    $('div.tooltip').css({
        top: event.pageY + 10,
        left: event.pageX - 10
    });
};

var tooltipShow = function (event, content, x, y) {
    $('div.tooltip').remove();
    $('<div class="tooltip"><ul><li>foo</li><li>bar</li><li>fubar</li></ul></div>')
        .appendTo('body');
    tooltipPosition(event, x, y);
};

var tooltipHide = function (event) {
    $('div.tooltip').remove();
}


$("#foo").bind({
    mousemove: tooltipPosition,
    mouseenter: tooltipShow,
    mouseleave: tooltipHide
});

.tooltip {
border: 1px solid rgb(153, 188, 232);
border-radius: 4px;
background-color: white;
position: absolute;
z-index: 2;
padding: 3px;