CODEWITHSUNDEEP
jqueryjquery-ui
Noobster
Noobster

Reputation: 1044

jQuery UI Tooltip delay with no effect

Can someone please explain how one might delay the tooltip without appending any effects? It seems to me the only way you can 'delay' anything is by messing with the 'show' attribute, but when you do so it must be bound with an effect, like so:

show: { effect: "blind", duration: 800 }

Any help would be greatly appreciated!

Upvotes: 1

Views: 4828

Answers (3)

Bryce Chamberlain
Bryce Chamberlain

Reputation: 535

I achieved this by setting the options on the tooltip object after the above didn't work for my specific app.

// Initialize tooltips.
$( '.tooltip-wait' ).tooltip();

// Add 5s delay before showing the tooltip.
// http://api.jqueryui.com/tooltip/#method-option
$( '.tooltip-wait' ).tooltip( "option", "show.delay", 500 );

Upvotes: 1

Rounin
Rounin

Reputation: 29453

You may be happy to learn that you can achieve exactly this effect without any scripting at all (in either jQuery or in plain javascript).

A single CSS transition will produce the same effect:

p {
line-height: 24px;
}

p span {
display: inline-block;
position: relative;
padding: 0 6px;
line-height: 22px;
background-color: rgb(255,255,127);
border: 1px solid rgb(255,255,0);
opacity: 0;
transition: opacity 0s linear 2s;
}

p:hover span {
opacity: 100;
}
<p>Hover me <span>I am a tooltip</span></p>

Upvotes: 1

j08691
j08691

Reputation: 207861

You can use the built-in delay parameter along with the duration like:

show: {
  delay: 5000,
  duration: 0
}

jsFiddle example

Upvotes: 5

Related Questions