[Solved] Wierd error: "v is undefined"

[aquinn]

Hi, I am using qtips in an options page I'm building for a WordPress theme.

I've come across a strange error. Some qtips (the <a> link) will work, but others won't. There is absolutely nothing different with the code between the ones that work and the ones that don't. Even if I copy and paste the one that works into a certain location, it suddenly doesn't want to work. Note: I am NOT tying these qtips to a certain ID or Class, so that isn't the problem.

I ran Firebug and it uncovered this error when I clicked on a qtip link that doesn't work:

v is undefined
[Break on this error] (function(f){f.fn.qtip=function(B,u){v...ses:{tooltip:"qtip-blue"}}}})(jQuery);

qtip.js line 16

I can't figure out what I'm doing wrong. The weird thing is, sometimes I'll run Firebug and it doesn't report the "v not defined error", but those same tooltips still won't display.

Here is the link I use (the PHP is there just for WordPress purposes:

JS Code

<a href="#" rel="'.get_bloginfo('template_directory').'/library/js/qtipcontent/grid_tutorial.html" class="lightbulb"><strong>Grid System Tutorial</strong></a>

Here is my DOM script (I am using "jQuery" instead of $ because I have other scripts running, too).

JS Code

// Create the tooltips only on document load
jQuery(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   jQuery('a[rel]').each(function()
   {
      jQuery(this).qtip(
      {
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: 'Loading...',
            url: jQuery(this).attr('rel'), // Use the rel attribute of each element for the url to load
            title: {
               text: jQuery(this).text(), // Give the tooltip a title using each elements text
               button: 'Close' // Show a close link in the title
            }
         },
         position: {
            corner: {
               target: 'rightMiddle', // Position the tooltip above the link
               tooltip: 'leftMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }
         },
         show: { 
            when: 'click', 
            solo: true // Only show one tooltip at a time
         },
         hide: 'unfocus',
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 0,
               radius: 4
            },
            name: 'light', // Use the default light style
            width: 500 // Set the tooltip width
         }
      })
   });
});

If anyone has any suggestions or ideas I'd really appreciate it.

[Craig]

aquinn, could you confirm whether or not this occurs in the latest branch revision: http://bazaar.launchpad.net/~craig.craig.../1.0/files

[amitshahc]

hello i am getting the same error when i enable tip ast true;

i am using rc3 version.
with jquery 1.6.1 . min.js / also tried 1.3.2

JS Code

jQuery(document).ready(function() 
{
	jQuery("#txtBalance").qtip({
	   content: 'I\'m at the top right of my target',
	   position: {
		  corner: {
			 target: 'topCenter',
			 tooltip: 'bottomCenter'
		  }		  
	   },	   
	   style: {
                  border: {
                     width: 5,
                     radius: 10
                  },
                  padding: 10, 
                  textAlign: 'center',
                  tip: true, // Give it a speech bubble tip with automatic corner detection
                  name: 'cream' // Style it according to the preset 'cream' style
               }
	});
});

if i comment out //tip: true line then it works.

[Craig]

Try out the latest branch version http://bazaar.launchpad.net/~craig.craig.../1.0/files

[amitshahc]

(3rd June 01:05)Craig Wrote:  Try out the latest branch version http://bazaar.launchpad.net/~craig.craig.../1.0/files

Thanks Craig , it resolved the issue. but though the question remains in my mind . i had used this before in my other website, where i used the same version. but there it didn't occur the issue.

i will try to find out why later.

[amitshahc]

JS Code

jQuery(document).ready(function(){
	jQuery("#txtBalance").qtip({
		   content: 'Initial Amount (optional),  \
					Your each expense entry will be deducted from this amount.',
		   hide: 'blur',
		   show: { when: { event: 'focus' }, ready: false, effect: {type: 'fade', length: 100} },
		   position: {
			 corner: {
				 target: 'leftTop',
				 tooltip: 'rightTop'
			  }		  		  
		   },	   
		   style: {
			  border: {
				 width: 5,
				 radius: 1,
				 color: '#EEEEC0'
			  },
			  background: '#FFFFCC',
			  padding: 10, 
			  textAlign: 'center',
			  tip: true // Give it a speech bubble tip with automatic corner detection
			  //name: 'dark' // Style it according to the preset 'cream' style
		   }
		});
});

using the version u provided it resolves the issue of "v is undefined".

but in chrome it shows the sliding effect when appearing the tip box. so i tried to change the effect by "effect: {type: 'fade', length: 100}". but results the same in chrome. in other browsers it works perfect. if i turned "length: 0" then it don't shows the sliding effect in chrome. but then what if i want to use other effect?

and if i replaced .js file name with older rc3, the effect works fine. but in IE tip corner don't shows.

-
Thanks
Amit Shah

---

Hi Craig,

using https://github.com/dustmoo/qtip/raw/master/jquery.qtip-1.0.0-rc3-dm.js

reloves the above issue. and works perfect in all browser with proper effect and showing tip.

is it ok to use the js?

[Craig]

Yup. 1.0 is dead now anywho so use what you wish qTip2 is where the active development is!