Individual jquery delay for different types

Question

I just looked at the hints from jquery-ui and I have the following code:

$(function() { $( document ).tooltip({ items: "[tooltip], [title]", content: function() { var element = $( this ); if ( element.is( "[tooltip]" ) ) { var id = element.attr( "tooltip" ); return $("#tooltip_"+id)[0].innerHTML; } if ( element.is( "[title]" ) ) { return element.attr( "title" ); } }, show: { effect: "slideDown" } }); }); 

He works, and he does what he must.
The reason I used different methods if this is a tooltip with a tooltip attribute or title attribute: If it is a tooltip attribute, then there is only an identifier, and somewhere on the page there is a div element containing the contents of the tooltip (this is a table with the material in it).
But if it's the title attribute, I want the usual behavior.

However, I want to define various delays for tooltips defined by the tooltip or title attribute.
For instance. if it's a tooltip tooltip, I want a delay of 200 ms, and if it's a tooltip header, I want 500 ms.

I have no idea how to do this.
I know that if I add delay: 500 after effect: "slideDown" , the delay for ALL tooltips will be 500 ms, but I don’t know how to do it separately.

I hope I didn’t bother you with such a long text, and you understand my problem.
Thanks in advance!

Answer 1

One solution just uses .tooltip() twice.

 $(function () { $(document) .tooltip({ items: "[tooltip]", content: function () { var $element = $(this); var id = $element.attr("tooltip"); return $("#tooltip_" + id).html(); }, show: { effect: "slideDown", duration: 200 } }) .tooltip({ items: "[title]", content: function () { var $element = $(this); return $element.attr("title"); }, show: { effect: "slideDown", duration: 500 } }); });