[Solved] override z-index

[Scott Elliott]

I've looked at other threads that were solved on doing this, but it's not working for me. I am using the qtip in an ASP.NET modal pop-up and it sets its z-index to 100001. Here's my code:

JS Code

var maxZIndex;
 
$.fn.qtip.defaults = $.extend(true, {}, $.fn.qtip.defaults, {
 
	position: { my: "bottom center", at: "top center" },
	show: { delay: 0 },
	hide: { delay: 0 },
	style: { classes: "ui-tooltip-shadow ui-tooltip-rounded", widget: true },
	events: {
		render: function(e, api) {
			setMaxZIndex();
			$(api.elements.tooltip).css('z-index', maxZIndex + 1);
			console.log(maxZIndex+1);
		}
	}
 
});
 
function setMaxZIndex() { 
      maxZIndex = Math.max.apply(null, $.map($('form > *'), function(e, n) { 
                              if($(e).css('position') != 'static') 
                                    return parseInt($(e).css('z-index')) || 1; })); 
}

The console.log shows the correct z-index of 100002. Yet ... the z-index of the qtip is still 15001. What gives?

[Craig]

Are you trying to set the base zIndex of the tooltips? Use the $.fn.qtip.zindex property for that

[Scott Elliott]

(4th May 18:15)Craig Wrote:  Are you trying to set the base zIndex of the tooltips? Use the $.fn.qtip.zindex property for that

Ok, so I changed the defaults section in my original post to:

JS Code

events: {
   render: function(e, api) {
      setMaxZIndex();
      //$(api.elements.tooltip).css('z-index', maxZIndex + 1);
      $.fn.qtip.baseIndex = maxZIndex + 1;
      console.log(maxZIndex+1);
   }
}

Still, no go. The tip z-index remains 150001.

---

Btw, I also tried:

JS Code

(function($, window, document, undefined) {
 
	setMaxZIndex();
	$.fn.qtip.baseIndex = maxZIndex;
	console.log("$.fn.qtip.baseIndex: " + $.fn.qtip.baseIndex.toString());
 
})(jQuery, this, document);

Firebug's Console shows that $.fn.qtip.baseIndex IS 100002, as expected. However, the tip still displays style="z-index: 15002".

[kiddailey]

Scott: Try "$.fn.qtip.zindex" rather than "$.fn.qtip.baseIndex":

JS Code

events: {
   render: function(e, api) {
      setMaxZIndex();
      //$(api.elements.tooltip).css('z-index', maxZIndex + 1);
      $.fn.qtip.zindex = maxZIndex + 1;
      console.log(maxZIndex+1);
   }
}

[Scott Elliott]

(5th May 02:47)kiddailey Wrote:  Scott: Try "$.fn.qtip.zindex" rather than "$.fn.qtip.baseIndex":

JS Code

events: {
   render: function(e, api) {
      setMaxZIndex();
      //$(api.elements.tooltip).css('z-index', maxZIndex + 1);
      $.fn.qtip.zindex = maxZIndex + 1;
      console.log(maxZIndex+1);
   }
}

2 Questions. Which of these are possible and of those that are, which one is the most efficient (performance-wise):

JS Code

// Method 1: events > render method
$("#selector").qtip({ 
    events: { 
        render: function(e, api) { 
            $.fn.qtip.zindex = maxZIndex + 1; 
        }  
    } 
});

-- or --

JS Code

// Method 2: zindex a top-level property???
$("#selector").qtip({ zindex: maxZIndex + 1 });

-- or --

JS Code

// Method 3: setting zindex at any point after qtip has been initialized
$.fn.qtip.zindex = maxZIndex + 1;

It just seems weird to me that you have to set this via $.fn.qtip.zindex. Seems to me I should be able to do this in my $.fn.qtip.defaults object literal e.g. Method 2.

[kiddailey]

Only the 1st and 3rd are possible at the moment. As far as performance -- if I were to guess -- I'd say the 3rd one as it is (mostly) a simple variable assignment. In the first one you've got the overhead of the new function and it's call. In the second, you've got the "merging" of the settings object with the custom parameter object.

Modifying the z-index base has come up a number of times, but I'm not sure if it's that common a feature that it needs to be exposed via the settings object. Curious to hear Craig's thoughts on that though.

[Scott Elliott]

(5th May 06:08)kiddailey Wrote:  Only the 1st and 3rd are possible at the moment. As far as performance -- if I were to guess -- I'd say the 3rd one as it is (mostly) a simple variable assignment. In the first one you've got the overhead of the new function and it's call. In the second, you've got the "merging" of the settings object with the custom parameter object.

Modifying the z-index base has come up a number of times, but I'm not sure if it's that common a feature that it needs to be exposed via the settings object. Curious to hear Craig's thoughts on that though.

That's what I figured. And by the way, this did work for me:

JS Code

// set tooltip zindex to the highest zindex so it's never hidden
(function($, window, document, undefined) {
 
	$.fn.qtip.zindex = getMaxZIndex();
	console.log("$.fn.qtip.zindex: " + $.fn.qtip.zindex.toString());
 
})(jQuery, this, document);

[Craig]

Making the z-index a per-tooltip setting would kill the libraries z-index stacking memory. Not to mention that even though qTip can do a lot of things tooltips don't usually do, you have to remember its still just that, a tooltip library At the end of the day all the fancy examples are just use cases for overflowing core functionality, so making it a per-tooltip property doesn't really make much sense in my opinion.

Besides, as you've demonstrated you can quite easily achieve this mnaually, although I'm still not sure on what kind of use-case in which this would be useful? Thoughts?

[Scott Elliott]

(8th May 23:44)Craig Wrote:  Making the z-index a per-tooltip setting would kill the libraries z-index stacking memory. Not to mention that even though qTip can do a lot of things tooltips don't usually do, you have to remember its still just that, a tooltip library At the end of the day all the fancy examples are just use cases for overflowing core functionality, so making it a per-tooltip property doesn't really make much sense in my opinion.

Besides, as you've demonstrated you can quite easily achieve this mnaually, although I'm still not sure on what kind of use-case in which this would be useful? Thoughts?

Well, as far as my use-case, I am using AjaxControlToolkit's ModalPopUpExtender. They generate their own z-index to make sure their modal is the topmost layer. I don't know what that is until runtime and obviously, I would want my tooltips to be topmost so that they would be visible in those modal popups.

I understand your reasoning for not exposing z-index as a top level property. However, if you were to make QTIP.zindex a calculation that sets itself to 1 above the topmost layer on the page instead of hard-coding it to 15000, I would've never had the issue in the first place thereby leaving zindex alone, as you intended.

Why not do something like:

JS Code

// Set global qTip properties
QTIP.version = '2.0.0pre';
QTIP.nextid = 0;
QTIP.inactiveEvents = 'click dblclick mousedown mouseup mousemove mouseleave mouseenter'.split(' ');
QTIP.zindex = Math.max(15000, Math.max.apply(null, 
	$.map($("body *"), function(elem) {
		var $elem = $(elem), retVal = null;
		if($elem.css("position") != "static") { retVal = parseInt($elem.css("z-index")) || null; }
		return retVal;
	})
)) + 1;

Personally, I use "form *" as my $.map selector, but I changed it to "body *" in the example, as not everyone would have a form on their pages. I tested this change in the qtip.js and it works perfectly. What do you think, Craig?

I

[Craig]

I don't know... it seems like extra work for the browser for something that 90% of users wouldn't notice. Who uses z-indexs above 15000 regularly any who? And since it's an exposed property, it's easily override-able if you need it. But then maybe I'm just a purist

[Scott Elliott]

(9th May 18:29)Craig Wrote:  I don't know... it seems like extra work for the browser for something that 90% of users wouldn't notice. Who uses z-indexs above 15000 regularly any who? And since it's an exposed property, it's easily override-able if you need it. But then maybe I'm just a purist

True, but you could have an exposed property that would allow you to turn it off/on in the defaults, with the default being off. It was just a thought.

[amitshahc]

how come you all agree with solution given.
because copy and paste the above code gives me javascript error.

HTML Code

Error: missing name after . operator
Source File: http://localhost/test/expense/js/index.js
Line: 190, Column: 93
Source Code:
$.fn.qtip.<span class="highlight" style="padding-left: 0px; padding-right: 0px;">zindex</span> = max<span class="highlight" style="padding-left: 0px; padding-right: 0px;">ZIndex</span> + 1;

please i need proper solution to overwrite z-index. this post is very confusing.
write in simple language with example.

[Scott Elliott]

(29th June 12:57)amitshahc Wrote:  please i need proper solution to overwrite z-index. this post is very confusing.
write in simple language with example.

I'm not totally sure what you don't understand. It seems as though you may not have read the whole thing. If you don't have the maxZIndex() function, it's not going to work for you.

Here's what I actually ended up with in my project:

JS Code

function bindTooltips($element, e) {
 
		$element.qtip({
 
			id : $element.attr("id").toLowerCase(),
			overwrite : false, // Make sure the tooltip won't be overridden once created
			content	: { 
 
				text : $element.data("tooltip"), 
				title : $element.attr("alt") 
 
			},
			show : { 
 
				event : e.type, // Use the same show event as the one that triggered the event handler
				ready : true // Show the tooltip as soon as it's bound, vital so it shows up the first time you hover!
 
			}
 
	   }, e); // Pass through our original event to qTip
 
	}
 
	function getMaxZ(selector) {
 
		// Retrieves highest zindex based on the selector passed in. 
		// If the selector is undefined, we use a default of "body *"
		return Math.max(15000, Math.max.apply(null, 
			$.map($(selector || "body *"), function(v) {
				var $v = $(v), retVal = null;
				if ($v.css("position") != "static") { retVal = parseInt($v.css("z-index")) || null; }
				return retVal;
			})
		)) + 1;
 
	}
 
	// Create our tooltip defaults
	$.fn.qtip.defaults = $.extend(true, {}, $.fn.qtip.defaults, {
 
		position	: { my : "bottom center", at : "top center" },
		show		 : { delay : 0 },
		hide		 : { delay : 0 },
		style		: { classes: "ui-tooltip-shadow ui-tooltip-rounded", widget: true }
 
	});
 
	// Bind our tooltip to all current and future events
	$(".buttonHelp").mouseover(function(e) { bindTooltips($(this), e); });
 
	// Set tooltip zindex to the highest zindex so it's never hidden
	$.fn.qtip.zindex = getMaxZ();
	console.log("$.fn.qtip.zindex: " + $.fn.qtip.zindex.toString());

I had to abstract some things away, as I really use object literals for my entire script, but I hope this helps.

[Craig]

Basically, just change the $.fn.qtip.zindex property on page load (before you create any tooltips)