' + containers.topLeft + containers.topRight + betweenCorners;
+ self.elements.wrapper.prepend(borderTop);
+
+ // Create bottom border container
+ borderBottom = '
' + containers.bottomLeft + containers.bottomRight + betweenCorners;
+ self.elements.wrapper.append(borderBottom);
+
+ // Draw the borders if canvas were used (Delayed til after DOM creation)
+ if($('').get(0).getContext) {
+ self.elements.wrapper.find('canvas').each(function () {
+ borderCoord = coordinates[$(this).parent('[rel]:first').attr('rel')];
+ drawBorder.call(self, $(this), borderCoord, radius, color);
+ });
+ }
+
+ // Create a phantom VML element (IE won't show the last created VML element otherwise)
+ else if($.browser.msie) { self.elements.tooltip.append('.attr('src') + ')
').load(function () {
+ if(++loadedImages === images.length) { afterLoad(); }
+ });
+ });
+ }
+ else { afterLoad(); }
+ }
+ else {
+ self.options.content.text = content;
+ }
+
+ // Call API method and log event
+ self.onContentUpdate.call(self);
+ return self;
+ },
+
+ loadContent: function (url, data, method) {
+ var returned;
+
+ function setupContent(content) {
+ // Call API method and log event
+ self.onContentLoad.call(self);
+
+ // Update the content
+ self.updateContent(content);
+ }
+
+ // Make sure tooltip is rendered and if not, return
+ if(!self.status.rendered) { return false; }
+
+ // Call API method and if return value is false, halt
+ returned = self.beforeContentLoad.call(self);
+ if(returned === false) { return self; }
+
+ // Load content using specified request type
+ if(method === 'post') { $.post(url, data, setupContent); }
+ else { $.get(url, data, setupContent); }
+
+ return self;
+ },
+
+ updateTitle: function (content) {
+ var returned;
+
+ // Make sure tooltip is rendered and content is defined
+ if(!self.status.rendered || !content) { return false; }
+
+ // Call API method and if return value is false, halt
+ returned = self.beforeTitleUpdate.call(self);
+ if(returned === false) { return self; }
+
+ // Set the new content and reappend the button if enabled
+ if(self.elements.button) { self.elements.button = self.elements.button.clone(true); }
+ self.elements.title.html(content);
+ if(self.elements.button) { self.elements.title.prepend(self.elements.button); }
+
+ // Call API method and log event
+ self.onTitleUpdate.call(self);
+ return self;
+ },
+
+ focus: function (event) {
+ var curIndex, newIndex, elemIndex, returned;
+
+ // Make sure tooltip is rendered and if not, return
+ if(!self.status.rendered || self.options.position.type === 'static') { return false; }
+
+ // Set z-index variables
+ curIndex = parseInt(self.elements.tooltip.css('z-index'), 10);
+ newIndex = 15000 + $('div.qtip[id^="qtip"]').length - 1;
+
+ // Only update the z-index if it has changed and tooltip is not already focused
+ if(!self.status.focused && curIndex !== newIndex) {
+ // Call API method and if return value is false, halt
+ returned = self.beforeFocus.call(self, event);
+ if(returned === false) { return self; }
+
+ // Loop through all other tooltips
+ $('div.qtip[id^="qtip"]').not(self.elements.tooltip).each(function () {
+ if($(this).qtip('api').status.rendered === true) {
+ elemIndex = parseInt($(this).css('z-index'), 10);
+
+ // Reduce all other tooltip z-index by 1
+ if(typeof elemIndex === 'number' && elemIndex > -1) {
+ $(this).css({ zIndex: parseInt($(this).css('z-index'), 10) - 1 });
+ }
+
+ // Set focused status to false
+ $(this).qtip('api').status.focused = false;
+ }
+ });
+
+ // Set the new z-index and set focus status to true
+ self.elements.tooltip.css({ zIndex: newIndex });
+ self.status.focused = true;
+
+ // Call API method and log event
+ self.onFocus.call(self, event);
+ }
+
+ return self;
+ },
+
+ disable: function (state) {
+ self.status.disabled = state ? true : false;
+ return self;
+ },
+
+ destroy: function () {
+ var i, returned, interfaces,
+ oldattr = self.elements.target.data('old'+self.cache.attr[0]);
+
+ // Call API method and if return value is false, halt
+ returned = self.beforeDestroy.call(self);
+ if(returned === false) { return self; }
+
+ // Check if tooltip is rendered
+ if(self.status.rendered) {
+ // Remove event handlers and remove element
+ self.options.show.when.target.unbind('mousemove.qtip', self.updatePosition);
+ self.options.show.when.target.unbind('mouseout.qtip', self.hide);
+ self.options.show.when.target.unbind(self.options.show.when.event + '.qtip');
+ self.options.hide.when.target.unbind(self.options.hide.when.event + '.qtip');
+ self.elements.tooltip.unbind(self.options.hide.when.event + '.qtip');
+ self.elements.tooltip.unbind('mouseover.qtip', self.focus);
+ self.elements.tooltip.remove();
+ }
+
+ // Tooltip isn't yet rendered, remove render event
+ else { self.options.show.when.target.unbind(self.options.show.when.event + '.qtip-' + self.id + '-create'); }
+
+ // Check to make sure qTip data is present on target element
+ if(typeof self.elements.target.data('qtip') === 'object') {
+ // Remove API references from interfaces object
+ interfaces = self.elements.target.data('qtip').interfaces;
+ if(typeof interfaces === 'object' && interfaces.length > 0) {
+ // Remove API from interfaces array
+ for(i = 0; i < interfaces.length - 1; i++) {
+ if(interfaces[i].id === self.id) { interfaces.splice(i, 1); }
+ }
+ }
+ }
+ $.fn.qtip.interfaces.splice(self.id, 1);
+
+ // Set qTip current id to previous tooltips API if available
+ if(typeof interfaces === 'object' && interfaces.length > 0) { self.elements.target.data('qtip').current = interfaces.length - 1; }
+ else { self.elements.target.removeData('qtip'); }
+
+ // Reset old title attribute if removed
+ if(oldattr) {
+ self.elements.target.attr(self.cache.attr[0], oldattr);
+ }
+
+ // Call API method and log destroy
+ self.onDestroy.call(self);
+
+ return self.elements.target;
+ },
+
+ getPosition: function () {
+ var show, offset;
+
+ // Make sure tooltip is rendered and if not, return
+ if(!self.status.rendered) { return false; }
+
+ show = (self.elements.tooltip.css('display') !== 'none') ? false : true;
+
+ // Show and hide tooltip to make sure coordinates are returned
+ if(show) { self.elements.tooltip.css({ visiblity: 'hidden' }).show(); }
+ offset = self.elements.tooltip.offset();
+ if(show) { self.elements.tooltip.css({ visiblity: 'visible' }).hide(); }
+
+ return offset;
+ },
+
+ getDimensions: function () {
+ var show, dimensions;
+
+ // Make sure tooltip is rendered and if not, return
+ if(!self.status.rendered) { return false; }
+
+ show = (!self.elements.tooltip.is(':visible')) ? true : false;
+
+ // Show and hide tooltip to make sure dimensions are returned
+ if(show) { self.elements.tooltip.css({ visiblity: 'hidden' }).show(); }
+ dimensions = {
+ height: self.elements.tooltip.outerHeight(),
+ width: self.elements.tooltip.outerWidth()
+ };
+ if(show) { self.elements.tooltip.css({ visiblity: 'visible' }).hide(); }
+
+ return dimensions;
+ }
+ });
+ }
+
+ // Implementation
+ $.fn.qtip = function (options, blanket) {
+ var i, id, interfaces, opts, obj, command, config, api;
+
+ // Return API / Interfaces if requested
+ if(typeof options === 'string') {
+ if($(this).data('qtip')) {
+ // Return requested object
+ if(options === 'api') {
+ return $(this).data('qtip').interfaces[$(this).data('qtip').current];
+ }
+ else if(options === 'interfaces') {
+ return $(this).data('qtip').interfaces;
+ }
+ }
+ else {
+ return $(this);
+ }
+ }
+
+ // Validate provided options
+ else {
+ // Set null options object if no options are provided
+ if(!options) { options = {}; }
+
+ // Sanitize option data
+ if(typeof options.content !== 'object' || (options.content.jquery && options.content.length > 0)) {
+ options.content = { text: options.content };
+ }
+ if(typeof options.content.title !== 'object') {
+ options.content.title = { text: options.content.title };
+ }
+ if(typeof options.position !== 'object') {
+ options.position = { corner: options.position };
+ }
+ if(typeof options.position.corner !== 'object') {
+ options.position.corner = {
+ target: options.position.corner,
+ tooltip: options.position.corner
+ };
+ }
+ if(typeof options.show !== 'object') {
+ options.show = { when: options.show };
+ }
+ if(typeof options.show.when !== 'object') {
+ options.show.when = { event: options.show.when };
+ }
+ if(typeof options.show.effect !== 'object') {
+ options.show.effect = { type: options.show.effect };
+ }
+ if(typeof options.hide !== 'object') {
+ options.hide = { when: options.hide };
+ }
+ if(typeof options.hide.when !== 'object') {
+ options.hide.when = { event: options.hide.when };
+ }
+ if(typeof options.hide.effect !== 'object') {
+ options.hide.effect = { type: options.hide.effect };
+ }
+ if(typeof options.style !== 'object') {
+ options.style = { name: options.style };
+ }
+
+ // Sanitize option styles
+ options.style = sanitizeStyle(options.style);
+
+ // Build main options object
+ opts = $.extend(true, {}, $.fn.qtip.defaults, options);
+
+ // Inherit all style properties into one syle object and include original options
+ opts.style = buildStyle.call({
+ options: opts
+ }, opts.style);
+ opts.user = $.extend(true, {}, options);
+ }
+
+ // Iterate each matched element
+ return $(this).each(function () // Return original elements as per jQuery guidelines
+ {
+ var self = $(this), content = false;
+
+ // Check for API commands
+ if(typeof options === 'string') {
+ command = options.toLowerCase();
+ interfaces = $(this).qtip('interfaces');
+
+ // Make sure API data exists
+ if(typeof interfaces === 'object') {
+ // Check if API call is a BLANKET DESTROY command
+ if(blanket === true && command === 'destroy') {
+ for(i = interfaces.length - 1; i > -1; i--) {
+ if('object' === typeof interfaces[i]) {
+ interfaces[i].destroy();
+ }
+ }
+ }
+
+ // API call is not a BLANKET DESTROY command
+ else {
+ // Check if supplied command effects this tooltip only (NOT BLANKET)
+ if(blanket !== true) { interfaces = [$(this).qtip('api')]; }
+
+ // Execute command on chosen qTips
+ for (i = 0; i < interfaces.length; i++) {
+ // Destroy command doesn't require tooltip to be rendered
+ if(command === 'destroy') { interfaces[i].destroy(); }
+
+ // Only call API if tooltip is rendered and it wasn't a destroy call
+ else if(interfaces[i].status.rendered === true) {
+ if(command === 'show') { interfaces[i].show(); }
+ else if(command === 'hide') { interfaces[i].hide(); }
+ else if(command === 'focus') { interfaces[i].focus(); }
+ else if(command === 'disable') { interfaces[i].disable(true); }
+ else if(command === 'enable') { interfaces[i].disable(false); }
+ else if(command === 'update') { interfaces[i].updatePosition(); }
+ }
+ }
+ }
+ }
+ }
+
+ // No API commands, continue with qTip creation
+ else {
+ // Create unique configuration object
+ config = $.extend(true, {}, opts);
+ config.hide.effect.length = opts.hide.effect.length;
+ config.show.effect.length = opts.show.effect.length;
+
+ // Sanitize target options
+ if(config.position.container === false) { config.position.container = $(document.body); }
+ if(config.position.target === false) { config.position.target = $(this); }
+ if(config.show.when.target === false) { config.show.when.target = $(this); }
+ if(config.hide.when.target === false) { config.hide.when.target = $(this); }
+
+ // Parse corner options
+ config.position.corner.tooltip = new Corner(config.position.corner.tooltip);
+ config.position.corner.target = new Corner(config.position.corner.target);
+
+ // If no content is provided, check title and alt attributes for fallback
+ if(!config.content.text.length) {
+ $(['title', 'alt']).each(function(i, attr) {
+ var val = self.attr(attr);
+ if(val && val.length) {
+ content = [attr, val];
+ self.data('old'+attr, val).removeAttr(attr);
+ config.content.text = val.replace(/\n/gi, '
'); + return false; + } + }); + } + + // Determine tooltip ID (Reuse array slots if possible) + id = $.fn.qtip.interfaces.length; + for (i = 0; i < id; i++) { + if(typeof $.fn.qtip.interfaces[i] === 'undefined') { + id = i; + break; + } + } + + // Instantiate the tooltip + obj = new QTip($(this), config, id); + + // Add API references and cache content if present + $.fn.qtip.interfaces[id] = obj; + obj.cache.attr = content; + + // Check if element already has qTip data assigned + if(typeof $(this).data('qtip') === 'object' && $(this).data('qtip')) { + // Set new current interface id + if(typeof $(this).attr('qtip') === 'undefined') { $(this).data('qtip').current = $(this).data('qtip').interfaces.length; } + + // Push new API interface onto interfaces array + $(this).data('qtip').interfaces.push(obj); + } + + // No qTip data is present, create now + else { + $(this).data('qtip', { + current: 0, + interfaces: [obj] + }); + } + + // If prerendering is disabled, create tooltip on showEvent + if(config.content.prerender === false && config.show.when.event !== false && config.show.ready !== true) { + config.show.when.target.bind(config.show.when.event + '.qtip-' + id + '-create', { qtip: id }, function (event) { + // Retrieve API interface via passed qTip Id + api = $.fn.qtip.interfaces[event.data.qtip]; + + // Unbind show event and cache mouse coords + api.options.show.when.target.unbind(api.options.show.when.event + '.qtip-' + event.data.qtip + '-create'); + api.cache.mouse = { + left: event.pageX, + top: event.pageY + }; + + // Render tooltip and start the event sequence + construct.call(api); + api.options.show.when.target.trigger(api.options.show.when.event); + }); + } + + // Prerendering is enabled, create tooltip now + else { + // Set mouse position cache to top left of the element + obj.cache.mouse = { + left: config.show.when.target.offset().left, + top: config.show.when.target.offset().top + }; + + // Construct the tooltip + construct.call(obj); + } + } + }); + }; + + // Define qTip API interfaces array + $.fn.qtip.interfaces = []; + + /* Add intermediary method to the 'attr' class to allow other plugins to successfully + retrieve the title of an element with a qTip applied */ + $.fn.qtip.fn = { attr: $.fn.attr }; + $.fn.attr = function(attr) { + var api = $(this).qtip('api'); + + return (arguments.length === 1 && (/title|alt/i).test(attr) && api.status && api.status.rendered === true) + ? $(this).data('old' + api.cache.attr[0]) + : $.fn.qtip.fn.attr.apply(this, arguments); + }; + + // Define configuration defaults + $.fn.qtip.defaults = { + // Content + content: { + prerender: false, + text: false, + url: false, + data: null, + title: { + text: false, + button: false + } + }, + // Position + position: { + target: false, + corner: { + target: 'bottomRight', + tooltip: 'topLeft' + }, + adjust: { + x: 0, + y: 0, + mouse: true, + screen: false, + scroll: true, + resize: true + }, + type: 'absolute', + container: false + }, + // Effects + show: { + when: { + target: false, + event: 'mouseover' + }, + effect: { + type: 'fade', + length: 100 + }, + delay: 140, + solo: false, + ready: false + }, + hide: { + when: { + target: false, + event: 'mouseout' + }, + effect: { + type: 'fade', + length: 100 + }, + delay: 0, + fixed: false + }, + // Callbacks + api: { + beforeRender: function () {}, + onRender: function () {}, + beforePositionUpdate: function () {}, + onPositionUpdate: function () {}, + beforeShow: function () {}, + onShow: function () {}, + beforeHide: function () {}, + onHide: function () {}, + beforeContentUpdate: function () {}, + onContentUpdate: function () {}, + beforeContentLoad: function () {}, + onContentLoad: function () {}, + beforeTitleUpdate: function () {}, + onTitleUpdate: function () {}, + beforeDestroy: function () {}, + onDestroy: function () {}, + beforeFocus: function () {}, + onFocus: function () {} + } + }; + + $.fn.qtip.styles = { + defaults: { + background: 'white', + color: '#111', + overflow: 'hidden', + textAlign: 'left', + width: { + min: 0, + max: 250 + }, + padding: '5px 9px', + border: { + width: 1, + radius: 0, + color: '#d3d3d3' + }, + tip: { + corner: false, + color: false, + size: { + width: 13, + height: 13 + }, + opacity: 1 + }, + title: { + background: '#e1e1e1', + fontWeight: 'bold', + padding: '7px 12px' + }, + button: { + cursor: 'pointer' + }, + classes: { + target: '', + tip: 'qtip-tip', + title: 'qtip-title', + button: 'qtip-button', + content: 'qtip-content', + active: 'qtip-active' + } + }, + cream: { + border: { + width: 3, + radius: 0, + color: '#F9E98E' + }, + title: { + background: '#F0DE7D', + color: '#A27D35' + }, + background: '#FBF7AA', + color: '#A27D35', + + classes: { + tooltip: 'qtip-cream' + } + }, + light: { + border: { + width: 3, + radius: 0, + color: '#E2E2E2' + }, + title: { + background: '#f1f1f1', + color: '#454545' + }, + background: 'white', + color: '#454545', + + classes: { + tooltip: 'qtip-light' + } + }, + dark: { + border: { + width: 3, + radius: 0, + color: '#303030' + }, + title: { + background: '#404040', + color: '#f3f3f3' + }, + background: '#505050', + color: '#f3f3f3', + + classes: { + tooltip: 'qtip-dark' + } + }, + red: { + border: { + width: 3, + radius: 0, + color: '#CE6F6F' + }, + title: { + background: '#f28279', + color: '#9C2F2F' + }, + background: '#F79992', + color: '#9C2F2F', + + classes: { + tooltip: 'qtip-red' + } + }, + green: { + border: { + width: 3, + radius: 0, + color: '#A9DB66' + }, + title: { + background: '#b9db8c', + color: '#58792E' + }, + background: '#CDE6AC', + color: '#58792E', + + classes: { + tooltip: 'qtip-green' + } + }, + blue: { + border: { + width: 3, + radius: 0, + color: '#ADD9ED' + }, + title: { + background: '#D0E9F5', + color: '#5E99BD' + }, + background: '#E5F6FE', + color: '#4D9FBF', + + classes: { + tooltip: 'qtip-blue' + } + } + }; +}(jQuery)); \ No newline at end of file
'); + return false; + } + }); + } + + // Determine tooltip ID (Reuse array slots if possible) + id = $.fn.qtip.interfaces.length; + for (i = 0; i < id; i++) { + if(typeof $.fn.qtip.interfaces[i] === 'undefined') { + id = i; + break; + } + } + + // Instantiate the tooltip + obj = new QTip($(this), config, id); + + // Add API references and cache content if present + $.fn.qtip.interfaces[id] = obj; + obj.cache.attr = content; + + // Check if element already has qTip data assigned + if(typeof $(this).data('qtip') === 'object' && $(this).data('qtip')) { + // Set new current interface id + if(typeof $(this).attr('qtip') === 'undefined') { $(this).data('qtip').current = $(this).data('qtip').interfaces.length; } + + // Push new API interface onto interfaces array + $(this).data('qtip').interfaces.push(obj); + } + + // No qTip data is present, create now + else { + $(this).data('qtip', { + current: 0, + interfaces: [obj] + }); + } + + // If prerendering is disabled, create tooltip on showEvent + if(config.content.prerender === false && config.show.when.event !== false && config.show.ready !== true) { + config.show.when.target.bind(config.show.when.event + '.qtip-' + id + '-create', { qtip: id }, function (event) { + // Retrieve API interface via passed qTip Id + api = $.fn.qtip.interfaces[event.data.qtip]; + + // Unbind show event and cache mouse coords + api.options.show.when.target.unbind(api.options.show.when.event + '.qtip-' + event.data.qtip + '-create'); + api.cache.mouse = { + left: event.pageX, + top: event.pageY + }; + + // Render tooltip and start the event sequence + construct.call(api); + api.options.show.when.target.trigger(api.options.show.when.event); + }); + } + + // Prerendering is enabled, create tooltip now + else { + // Set mouse position cache to top left of the element + obj.cache.mouse = { + left: config.show.when.target.offset().left, + top: config.show.when.target.offset().top + }; + + // Construct the tooltip + construct.call(obj); + } + } + }); + }; + + // Define qTip API interfaces array + $.fn.qtip.interfaces = []; + + /* Add intermediary method to the 'attr' class to allow other plugins to successfully + retrieve the title of an element with a qTip applied */ + $.fn.qtip.fn = { attr: $.fn.attr }; + $.fn.attr = function(attr) { + var api = $(this).qtip('api'); + + return (arguments.length === 1 && (/title|alt/i).test(attr) && api.status && api.status.rendered === true) + ? $(this).data('old' + api.cache.attr[0]) + : $.fn.qtip.fn.attr.apply(this, arguments); + }; + + // Define configuration defaults + $.fn.qtip.defaults = { + // Content + content: { + prerender: false, + text: false, + url: false, + data: null, + title: { + text: false, + button: false + } + }, + // Position + position: { + target: false, + corner: { + target: 'bottomRight', + tooltip: 'topLeft' + }, + adjust: { + x: 0, + y: 0, + mouse: true, + screen: false, + scroll: true, + resize: true + }, + type: 'absolute', + container: false + }, + // Effects + show: { + when: { + target: false, + event: 'mouseover' + }, + effect: { + type: 'fade', + length: 100 + }, + delay: 140, + solo: false, + ready: false + }, + hide: { + when: { + target: false, + event: 'mouseout' + }, + effect: { + type: 'fade', + length: 100 + }, + delay: 0, + fixed: false + }, + // Callbacks + api: { + beforeRender: function () {}, + onRender: function () {}, + beforePositionUpdate: function () {}, + onPositionUpdate: function () {}, + beforeShow: function () {}, + onShow: function () {}, + beforeHide: function () {}, + onHide: function () {}, + beforeContentUpdate: function () {}, + onContentUpdate: function () {}, + beforeContentLoad: function () {}, + onContentLoad: function () {}, + beforeTitleUpdate: function () {}, + onTitleUpdate: function () {}, + beforeDestroy: function () {}, + onDestroy: function () {}, + beforeFocus: function () {}, + onFocus: function () {} + } + }; + + $.fn.qtip.styles = { + defaults: { + background: 'white', + color: '#111', + overflow: 'hidden', + textAlign: 'left', + width: { + min: 0, + max: 250 + }, + padding: '5px 9px', + border: { + width: 1, + radius: 0, + color: '#d3d3d3' + }, + tip: { + corner: false, + color: false, + size: { + width: 13, + height: 13 + }, + opacity: 1 + }, + title: { + background: '#e1e1e1', + fontWeight: 'bold', + padding: '7px 12px' + }, + button: { + cursor: 'pointer' + }, + classes: { + target: '', + tip: 'qtip-tip', + title: 'qtip-title', + button: 'qtip-button', + content: 'qtip-content', + active: 'qtip-active' + } + }, + cream: { + border: { + width: 3, + radius: 0, + color: '#F9E98E' + }, + title: { + background: '#F0DE7D', + color: '#A27D35' + }, + background: '#FBF7AA', + color: '#A27D35', + + classes: { + tooltip: 'qtip-cream' + } + }, + light: { + border: { + width: 3, + radius: 0, + color: '#E2E2E2' + }, + title: { + background: '#f1f1f1', + color: '#454545' + }, + background: 'white', + color: '#454545', + + classes: { + tooltip: 'qtip-light' + } + }, + dark: { + border: { + width: 3, + radius: 0, + color: '#303030' + }, + title: { + background: '#404040', + color: '#f3f3f3' + }, + background: '#505050', + color: '#f3f3f3', + + classes: { + tooltip: 'qtip-dark' + } + }, + red: { + border: { + width: 3, + radius: 0, + color: '#CE6F6F' + }, + title: { + background: '#f28279', + color: '#9C2F2F' + }, + background: '#F79992', + color: '#9C2F2F', + + classes: { + tooltip: 'qtip-red' + } + }, + green: { + border: { + width: 3, + radius: 0, + color: '#A9DB66' + }, + title: { + background: '#b9db8c', + color: '#58792E' + }, + background: '#CDE6AC', + color: '#58792E', + + classes: { + tooltip: 'qtip-green' + } + }, + blue: { + border: { + width: 3, + radius: 0, + color: '#ADD9ED' + }, + title: { + background: '#D0E9F5', + color: '#5E99BD' + }, + background: '#E5F6FE', + color: '#4D9FBF', + + classes: { + tooltip: 'qtip-blue' + } + } + }; +}(jQuery)); \ No newline at end of file