More different jQuery UI Tooltips on one page

Question

Using jQuery UI, how can I have more tooltips with different settings on one page?

I am using tooltips with different configuraions:

$(document).tooltip({
        items: "[data-tooltip]",
        content: function() {
            return $(this).data("tooltip");
        },
        show: 100,
        hide: 100
});

and another with much more default configuration

$(document).tooltip({
        show: 100,
        hide: 100
});

How can I have them together on one site? Calling both methods together doesnt work.

Answer 1

i think you dont want to have different tooltips on the same element

so just use selectors and classes to choose wich tooltip is used for wich element

<a class="selector">dasdasdsa</a>
<span class="selector2">dadasasdasdas</span>

$(".selector" ).tooltip({
    items: "[data-tooltip]",
    content: function() {
        return $(this).data("tooltip");
    },
    show: 100,
    hide: 100
 });

$(".selector2" ).tooltip({
    show: 100,
    hide: 100
 });