[Solved] qTip and SVG plugin

[Wolle51]

Hello,
are there known discrepancies with qTip and Keith Woods SVG plugin?
qTip works fine! on SVG elements when svgdom.js is deactivated. With svgdom.js active svgdom gets an error "this.each is not a function" when qTip fires on SVG elements.
Any hints for me?
Thanks
Wolfgang


Jquery.1.7.1
Jquery-ui.1.8.17
Jqeurysvg.1.4.4
qTip 1.0RC3

[Craig]

qTip 1.0 doesn't work well with SVG elements as far as I know... though qTip2 has an optional plugin that makes it compatible!

[Wolle51]

(7th February 16:50)Craig Wrote:  qTip 1.0 doesn't work well with SVG elements as far as I know... though qTip2 has an optional plugin that makes it compatible!

Sorry, it's really qTip2 (nightly Version) which doesn't work, recently downloaded and including the svg plugin.

[Craig]

Can you setup a test case please: http://jsfiddle.net/fdavn/

[Wolle51]

(7th February 18:41)Craig Wrote:  Can you setup a test case please: http://jsfiddle.net/fdavn/

I'm using jsFiddle for the first time, it will take a little...

[Graham Watson]

I can confirm this. With the SVG DOM extension in use, qTip2 produces a "this.each is not a function" error when the cursor enters an SVG element that has a tooltip assigned to it. When the SVG DOM extension is disabled, qTip2 works as expected.

The error appears on line 129 of jquery.svgdom.js, inside this function definition:
/* Support attributes on SVG nodes. */
$.fn.attr = function(origAttr) {

This is with Keith Wood's jQuery SVG DOM extension, version 1.4.5 (http://keith-wood.name/svg.html) and the current nightly version (May 9, 2012) of qTip2.

---

At http://forum.jquery.com/topic/svg-svgdom...-function, someone describes the same problem and has a little more insight that might help debug this.

[Graham Watson]

Fiddling around and playing off of a hunch, I found a hacky workaround. If 'this' doesn't have the each() method, then it must be a single element, in which case the code in each() can just be run once for 'this'.

So immediately before the following code in jquery.svgdom.js:

JS Code

return this.each(function() {
	if ($.svg.isSVGElem(this)) {
		for (var n in options) {
			var val = ($.isFunction(options[n]) ? options[n]() : options[n]);
			(type ? this.style[n] = val : this.setAttribute(n, val));
		}
	}
	else {
		origAttr.apply($(this), [name, value, type]);
	}
});
 
I added the following:
if (! this.each) {
	if ($.svg.isSVGElem(this)) {
		for (var n in options) {
			var val = ($.isFunction(options[n]) ? options[n]() : options[n]);
			(type ? this.style[n] = val : this.setAttribute(n, val));
		}
	}
	else {
		origAttr.apply($(this), [name, value, type]);
	}
	return;
}

And qTip2 now works as expected with SVG objects.