2

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

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

在我的控制器中：

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

2 回答 2

0

I just needed to adjust the tooltip handler to add custom HTML.

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

And then just use .join('<br/>') on the array.

See the jQuery API Documentation for more stuff.

See this Working Demo.

于 2013-12-19T00:53:00.247 回答
0

我前段时间遇到了类似的问题，我做了一个快速演示：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-19T01:02:01.913 回答