programatically show tip in different element

[jorfermo]

I've been trying without any success to show a tip in a form field after clicking the submit button

JS Code

$('submit').click( function() {
$('formfield').qtip({
			content: {
		  	text: 'tooltip',
		  }
		});
$('formfield').qtip("show");
});

Any suggestion?

Thanks!

[Craig]

Make sure to use the show.ready option if applying a qTip within an event callback:

JS Code

$('submit').click( function() {
   $('formfield').qtip({
      content: 'tooltip',
      show: { ready: true }
   });
});

[jorfermo]

Hi Craig.

Thanks for your answer.

I modified the code to add the ready.true but it didn't make any difference. There's no tooltip showing when I click the button...

(26th March 13:41)Craig Wrote:  Make sure to use the show.ready option if applying a qTip within an event callback:

JS Code

$('submit').click( function() {
   $('formfield').qtip({
      content: 'tooltip',
      show: { ready: true }
   });
});

[Craig]

jorfermo, make sure you're stopping form submission on the click event.

[jorfermo]

Yes... i was stopping it.

Just to test I added this code and it doesn't work either

JS Code

<a href="#" id="test">test</a>

JS Code

$('#test').click(function(){
		$('#formfield').qtip({
			content: {
		  	text: 'tooltip',
		  	show: { ready: true }
		  }
		});
		$('#formfield').qtip("show");
 
	});

[Craig]

make sure #formfield is there, and also check if the event is firing. There's nothing wrong with any of the qTip code as I can see. It must be either your selectors or a problem with how your handling the form events.

[jorfermo]

Ok.. It's working, the tooltip is created but it appears when I mouseover #formfield!!

What I want is the tip shows on #formfield when I click the button. Is that possible? What am I missing?

Thank you!

(30th March 12:45)Craig Wrote:  make sure #formfield is there, and also check if the event is firing. There's nothing wrong with any of the qTip code as I can see. It must be either your selectors or a problem with how your handling the form events.

[Craig]

forfermo, try setting show and hide to false:

JS Code

$('#test').click(function(){
      $('#formfield').qtip({
         content: {
           text: 'tooltip',
           show: {
              when: false,
              ready: true
           },
           hide: false
        }
      });
   });

[jorfermo]

Nothing... it doesn't work I simplified the code so that you can try:

If you click on link1, it shows the tooltip on link2 when you mouseover it.

JS Code

<a href="#" id="link1">link1</a>
 
	<a href="#" id="link2">link2</a>

JS Code

$('document').ready(function(){
 
	$('#link1').click(function(){
	      $('#link2').qtip({
	         content: {
	           text: 'tooltip',
	           show: {
								when: false,
								ready: true
							},
						hide: false
	        }
	      });
	      $('#link2').qtip("show");
	});
 
});