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工具提示，顯示工具提示列表

回答

相關問題