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

Question

我有一组数据想要在工具提示中显示。话虽这么说，工具提示似乎需要一个长字符串输入。我用逗号加入了数组，但是当我发送它时，我想将其显示为列表，而不是长字符串。

这是我的情况的一个例子:

在我的 Controller 中:

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

在模板中:

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

在指令中:

link: function(scope, element, attrs){
    // i have my data array back, but not sure how to display it as a list
    var dataArray = attrs.title.split(","); 
    element.tooltip(); //gives foo,bar,fubar in the tooltip
}

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

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

Answer 1

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

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

然后只需使用 .join('<br/>')在数组上。

请参阅jQuery API Documentation了解更多内容。

查看此 Working Demo .