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

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

这里是我的情况为例：

在我的控制器：

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

来源

2013-12-19 Conqueror

也许你可以加入它'
？或'\ r \ n's？ –

我试过这个，但它出来foo
，酒吧
，fubar
– Conqueror

你能给我们一个[JSFiddle]（http://jsfiddle.net/）吗？ –

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

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

然后就在阵列上使用.join('<br/>')。

查看jQuery API Documentation了解更多内容。

看到这个Working Demo。

来源

2013-12-19 00:53:00

我前一段时间遇到了类似的问题这一点，我做了一个快速演示：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;

}

来源

2013-12-19 01:02:01 BK110

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

回答

相关问题