How to show tooltip on click

问题

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?

回答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>

回答2:

I'd do it like this:

JS code:

$(function(){
    $('#helps').qtip({
        content: {
            text: 'I get shown on click'
        },
        show: {
            event: 'click'
        },
        hide: {
            event: 'click'
        }
    }).click(function() {
        var _$this = $(this);

        if(_$this.html() === 'Open') {
            _$this.html('Close');
        } else {
            _$this.html('Open');
        }
    })
});

HTML one:

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

EDIT: To hide tooltip on outer click:

$(function(){           
    $(this).click(function(e) {
        var _$elm = $(e.target);
        if(_$elm.attr('id') !== 'helps') {
            $('#helps').qtip('hide');
        }               
        return false;
    });

    $('#helps').click(function() {
        var _$this = $(this);               
        if(_$this.html() === 'Open') {
            _$this.html('Close').qtip('enable');                                    
        } else {
            _$this.html('Open').qtip('disable').qtip('hide');                   
        }
    }).qtip({
        content: {
            text: 'I get shown on click'
        },
        show: {
            event: 'click',
            when: {
                target: $('#helps:contains("Open")')
            }
        },
        hide: {
            event: 'click',
            when: {
                target: $('#helps:contains("Close")')
            }
        }
    });
});

回答3:

You should do

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

$('#helps').click(function() {
    if (this.innerHTML=="Open") {
        this.innerHTML = "Close";
    } else {
        this.innerHTML="Open";
    }
});

<a id="helps">Open</a>

Your code didn't work because you were creating the qTip on the first click! You should use the target option of qTip so that the tip is shown only if your element contains the text "Open"

回答4:

or even better, use jQuery for all your JS scripts:

$(function(){
   $('a.tooltip').qtip(
   {
      content: 'Some basic content for the tooltip!',
      api:{
              onShow: function(){
                  $('a.tooltip').html('Close');
              },
              onHide: function(){
                  $('a.tooltip').html('Open');
              }
      },
    show: {
      when: {
            event: "click"
      }
    }
   });
});

<a class='tooltip' href='#'>Click me!!</a>

回答5:

i thinks you could use:

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

is the best way to have classic tooltip..

来源：https://stackoverflow.com/questions/9278495/how-to-show-tooltip-on-click