How to show tooltip on click

Question

I'm trying to use qtip2. My problem is that I want to show tooltip only when user clicks an href with a specified html inside. So I try this:

function help(){
    var link = document.getElementById('helps');
    if(link.innerHTML=="Open"){
        $('#helps').qtip({
           content: {
              text: 'I get shown on click'
           },
           show: {
              event: 'click'
           }
        });
    link.innerHTML = "Close";
    }else{
        link.innerHTML="Open";
    }
}
<a href="javascript:help()" id="helps">Open</a>

My problem is that when I click, text becomes Close but tooltip doesn't show. When I click again text becomes Open and I see tooltip. What can I do?

Answer 1

You should initialize the qtip before the onclick handler.

$('#helps').qtip({
  content: {
    text: 'I get shown on click'
  },
  show: {
    event: 'click'
  }
});

function help() {
  var link = document.getElementById('helps');
  if (link.innerHTML == "Open") {
    link.innerHTML = "Close";
  } else {
    link.innerHTML = "Open";
  }
} 

< a href = "javascript:help()" id = "helps" > Open < /a>