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?

Why do you mix plain JS with jQuery? No need to use things like getElementById when you have jQuery. Besides that, `href="javascript:..."` is bad; use `onclick` instead! — ThiefMaster, Feb 14 '12 at 14:26

score 5 · Answer 1 · answered Feb 14 '12 at 14:25

5

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>

answered Feb 14 '12 at 14:25

Pulkit Goyal

5,604
1
32
50

1

He wants to show the tip only if the text of the link is "Open" – Nicola Peluchetti Feb 14 '12 at 14:32
ok, this work, but when i click again qtip doesn't hide itself, what can i do? – Jayyrus Feb 14 '12 at 14:39
@user1190704 hide also have a event: http://craigsworks.com/projects/qtip2/docs/hide/ – Feb 14 '12 at 14:51

score 1 · Answer 2 · edited Feb 01 '16 at 12:07

1

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"

edited Feb 01 '16 at 12:07

n2o

6,175
3
28
46

answered Feb 14 '12 at 14:24

Nicola Peluchetti

76,206
31
145
192

@user1190704 and when you click "Close"? – Nicola Peluchetti Feb 14 '12 at 14:45
text will not change when i click open – Jayyrus Feb 14 '12 at 14:45
@user1190704 did you take off the javascript as shown in my example? – Nicola Peluchetti Feb 14 '12 at 14:48

daniyel · Answer 3 · 2012-02-14T22:28:46.137

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

when i click Close, tooltip is shown again, so it doesn't hide. I think because show and hide event have the same way to go — Jayyrus, Feb 14 '12 at 14:59
weird. works fine on my local test. Open shows and Close hides. — daniyel, Feb 14 '12 at 15:05
SORRY.. WORKS FINE! :) i forgot css and i don't know why now works :P GOOD THANKS! — Jayyrus, Feb 14 '12 at 15:36
just another things.. to hide tooltip on mouse click out? what can i do? So i have to add another event to the hide section of tooltip — Jayyrus, Feb 14 '12 at 15:40

Rob Angelier · Answer 4 · 2012-02-14T15:02:31.990

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>

score 0 · Accepted Answer · edited Oct 13 '21 at 19:16

0

i thinks you could use:

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

is the best way to have classic tooltip..

edited Oct 13 '21 at 19:16

Developer

8,390
41
129
238

answered Feb 27 '12 at 14:57

Jayyrus

12,961
41
132
214

How to show tooltip on click

5 Answers5

Linked