CODEWITHSUNDEEP
jquerytooltipqtip
Jayyrus
Jayyrus

Reputation: 13051

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?

Upvotes: 3

Views: 9008

Answers (5)

Jayyrus
Jayyrus

Reputation: 13051

i thinks you could use:

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

is the best way to have classic tooltip..

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

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"

Upvotes: 1

daniyel
daniyel

Reputation: 682

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")')
            }
        }
    });
});

Upvotes: 1

Rob Angelier
Rob Angelier

Reputation: 2333

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>

Upvotes: 0

Pulkit Goyal
Pulkit Goyal

Reputation: 5654

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>

Upvotes: 5

Related Questions