Search code examples
jquerytooltipqtip2

How to make qtip2 step by step guide, reopen tooltips?

I was experimenting with the code here that shows a step-by-step guide with qtip2.

and i tried to do this:

  • load the page, see the tooltips
  • then close the tooltips
  • after closing them, i want to have a clickable link that will show again the tooltips from the start, without reloading the page.

I tried some stuff to make jquery execute again, but like

$("#reshow").click(function() { $(this).show(); });

but nothing I tried seemed to work.

I've set up a jsfiddle here with an example: http://jsfiddle.net/wpZ86/1/

(in case you know any easier way to do a step-by-step guide with tooltips, please do write it)

Thank you in advance for your answers!

Solution

  • All you need to do is use the api to show the tooltip again

    $('#qtip-step').qtip('api').show();

    Here is an updated demo, the code above is added to the "Setup the next/prev links" click code.

    Edit: Oh and make sure not to destroy the tooltip when hidden.

    hide: function(event, api) { /* api.destroy(); */ }