Question

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

以下是我的情况示例：

在我的控制器中：

$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。

Answer 2

前一段时间我遇到了类似的问题，我做了一个快速演示：http://jsfiddle.net/WR76R/

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

HTML：

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

Javascript：

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

CSS：

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

}

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

2 个答案: