[Solved] qtip to display on another in another php/html place holder

[davidkhan]

Hello ,

I got two file index.php and test.php , test url are

http://www.desktopfreewarefinder.com/qtiptest/index.php

and

http://www.desktopfreewarefinder.com/qtiptest/test.php

I have setup qtip on test.php and working fine if run test.php directly , but when i place on <div id="example-placeholder">
in index.php with javascript call , qtip is not displaying . I am not placing source code here, please see this simple source code with just right click on browser , although it is php all are html code , that will be more clear.

Please advice how to make it work.


Many thanks,
David

[Craig]

<script> elements are stripped out of AJAX calls, so no JavaScript within the page you're retrieving will run. You'll need to do it on the index.php page.

[davidkhan]

(23rd August 15:55)Craig Wrote:  <script> elements are stripped out of AJAX calls, so no JavaScript within the page you're retrieving will run. You'll need to do it on the index.php page.

Thanks for your info , at the moment i place the qtip code in test.php and working fine

JS Code

$('a1').each(function(){
   $currentLink = $(this);
    $currentLink.qtip({
         content:$(this).text(),
 
 style: { 
        				  padding: '10px 10px',
 
					      color:'#fff',
						  border:'1px solid #195fa4' ,
						  tip: 'bottomLeft',
						  name: 'dark' // Inherit the rest of the attributes from the preset dark style
					   },
 
			    position: {
                    adjust: {x: -30,y: -70}
					      },	
 
 
		 show: 'mouseover',
	hide: 'mouseout',

Now i place this code in index.php as well but no success , so is there any chance to access 'a' element inside that place holder like

JS Code

$('#example-placeholder a').each(function(){

i have seen in http://people.iola.dk/olau/flot/examples...cting.html

If that is possible or if that easy for you please share piece of code as i am not familiar with javascript.

Mant thanks,
david

[Craig]

You need to make sure you call the .qtip() function _after_ the AJAX content has been loaded in, best to do it in the success callback or similar of the $.ajax call.

[davidkhan]

(23rd August 22:00)Craig Wrote:  You need to make sure you call the .qtip() function _after_ the AJAX content has been loaded in, best to do it in the success callback or similar of the $.ajax call.

Many thank Craig , i found on the page
https://blueprints.edge.launchpad.net/qt...delegation

JS Code

$('.selector').live('mouseover', function() {
   $(this).qtip({
      content: 'Live tooltip',
      overwrite: false, // Make sure another tooltip can't override this one without it being explicitly destroyed
      show: { ready: true } // Required so the tooltip shows on first mouseover
   })
});

it work fine , but like in the forum

http://craigsworks.com/projects/forums/t...-only-once

if I change 'mouseover' to 'click' it display when clicked, but then again if I mouseover the element show rather than click

Any idea?

Many thanks,
david

[Craig]

Make sure to set the qTip event to the same one as the live delegation, like so:

JS Code

show: {
	event: event.type // Make sure "event" is the first parameter of your live callback
}

[davidkhan]

Thanks for your info Craig , i was testing according to your saying , but it is not working , this is my code

JS Code

<script type="text/javascript">
$(document).ready(function() {
$('a').live('click', function() {
$(this).qtip({
     content: $(this).text(),
	style: { padding: '10px 10px', color:'#fff',  border:'1px solid #195fa4' ,  tip: 'bottomLeft',  name: 'dark'  },
	position: { adjust: {x: -30,y: -70}  },	
	overwrite: false,
	show: { event: event.type }
   });});});
</script>

if i change show: { event: event.type } to show: { event: 'click' } , it was happening like before.

Please advise what am i doing wrong? I am using jquery.qtip-1.0.0-rc3.min.js

Many thanks ,
david

[Craig]

You need to make sure event is first parameter of the live function, as stated in the previous post comment:

JS Code

$('a').live('click', function(event) {

[davidkhan]

(25th August 18:25)Craig Wrote:  You need to make sure event is first parameter of the live function, as stated in the previous post comment:

JS Code

$('a').live('click', function(event) {

Thanks for your info and sorry to bother , i still cannot get it work , qtip not show when i click but when i hover after click it show up only on hover. My new code is

JS Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title> test.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="qtip.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('a').live('click', function(event) {
            $(this).qtip({
                content: $(this).text(),
                style: { padding: '10px 10px',  border: '1px solid #195fa4', tip: 'bottomLeft', name: 'dark' },
                position: { adjust: { x: -30, y: -70} },
                overwrite: false,
                show: { event: event.type }
            });
        });
    });
</script>
</head>
<body>
 
 
<a href="j<strong></strong>void(0)" id='hello'>THIS IS ANOTHER QTIP</a>
 
</body>
</html>

You can also test on http://www.desktopfreewarefinder.com/qti...ptest.html

Please advice what i am doing wrong.


Many thanks,
david

[Craig]

Oh my bad, try this:

JS Code

show: { when: { event: event.type } }