jQuery-only toolTip to display DIV content

I'm trying to use jquery's toolTip to display mouseover content. But rather than title="..." content, I want it do display a DIV content. And it should be modular...

This is what I came up with. It doesn't quite work... it only works for the first instance.

http://jsfiddle.net/5kkgS/1/

$(function () {
    $.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
}); 


$('.toolTipHTML').attr('title', function(){
        var ele = $(this).attr('data-ttipcontent');
        return $('.' + ele + '_content').remove().html()
    })


    $('.toolTipHTML').tooltip({
        tooltipClass: "stdTooltip",
        items: '*:not(.ui-dialog-titlebar-close)',
        show: {
            duration: 0,
        },
        hide: { effect: "fade", duration: 100 },
        position: { my: "left top", at: "left bottom" }
    });
});

The above code was adapted from the code I found here. But the example wasn't quite modular enough for my need. http://forum.jquery.com/topic/get-jquery-ui-tooltip-to-show-div-content

Thank you,

Solution

It only works for the first instance because you remove the div element that contains the text after the first implicit iteration with attr:

$('.toolTipHTML').attr('title', function(){
    var ele = $(this).attr('data-ttipcontent');
    return $('.' + ele + '_content').remove().html() // Removed, no longer available!
})

If you remove the remove() and just query the innerHTML (html()), that would solve your problems. However, then you're left with those DIV elements all up in your DOM!

If you don't mind them chilling in your DOM, you could use some CSS and just hide them (which, I would recommend anyway - since they'll show until your script runs...)

If the thought of them chilling there, taking up DOM space, or you potentially see hundreds, maybe thousands of helper div nodes (ok, prob not!), and you'd really like to remove them, then here's a fiddle I threw together:

http://jsfiddle.net/5kkgS/2/

(function() {
    var _cache = {};
    $('.toolTipHTML').each(function(){
        $(this).attr('title', function(){
            var ele = $(this).attr('data-ttipcontent'),
                title;
            if (_cache[ele]) {
                title = _cache[ele];
            } else {
                _cache[ele] = $('.' + ele + '_content').remove().html();
                title = _cache[ele];
            }
            return title;
        });
    });

    _cache = undefined;
}());

It's wrapped in a self executing function to minimize exposing globals. The script caches the HTML, so that future elements which require the content will use the cached content. You could expand the caching concept with elements themselves (throwing the removed elements into a fragment) that you query against. Both ways would (in theory) improve performance since you're minimizing the need to touch that DOM. Fun stuff!