jquery ui tooltip, display a list tooltip

Question

I have an array of data that I want to display in a tooltip. That being said, it seems that the tooltip expects a single long string of input. I joined my array by commmas but when I send it in, I want to display it as a list, not a long string.

Here is an example of my situation:

In my controller:

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

In the template:

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

In the directive:

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
}

Basically, in my tooltip, I want a list like a rendered version of this:

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

Answer 1

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.

Answer 2

I came across a similar problem to this some time ago, I made a quick demo: http://jsfiddle.net/WR76R/

Essentially you would just be creating your own tooltip with the following jQuery. I read about this technique when I was having the problem, I'll try to find the sauce

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;

}