diff --git a/README.md b/README.md index 52c73c8..a2f7810 100644 --- a/README.md +++ b/README.md @@ -142,6 +142,9 @@ Protip related attributes will always get a pt namespace so Protip won't conflic | **auto-hide** | false | *Bool, Number* | Tooltip will hide itself automatically after this timeout (milliseconds). | | **auto-show** | false | *Bool* | Automatically show tooltip for this element on load (stickies will be shown anyway). | | **mixin** | undefined | *String* | Tooltip mixins to use. Separated by spaces. | +| **background** | undefined | *String* | You can specify the tooltip background with this option. (Eg: "#333", "rgba(20,20,20,.8)") | +| **color** | undefined | *String* | You can specify the font color with this option. | +| **border** | undefined | *String* | You can specify the border color with this option, null for no border. (The border will always be 1px) | ## jQuery Helpers ```javascript @@ -213,22 +216,22 @@ el.protipShow({ # Gravity ## List of available positions -- corner-left-top +- top-left-corner - top-left - top - top-right -- corner-right-top +- top-right-corner - right-top - right - right-bottom - bottom-left - bottom - bottom-right -- corner-right-bottom +- bottom-right-corner - left-top - left - left-bottom -- corner-left-bottom +- bottom-left-corner ![Available Protip positions](https://raw.githubusercontent.com/wintercounter/Protip/master/img/docs-positions.png) diff --git a/bundle.js b/bundle.js index 5e53d8d..fbf1208 100644 --- a/bundle.js +++ b/bundle.js @@ -239,7 +239,10 @@ require('./src/Plugin'); animate: false, autoHide: false, autoShow: false, - mixin: null + mixin: null, + background: null, + color: null, + border: null } }, @@ -335,8 +338,12 @@ require('./src/Plugin'); * * @param key {string} Item instance identifier. */ - destroyItemInstance: function(key){ - this._itemInstances[key].destroy(); + destroyItemInstance: function (key) { + if (typeof key === 'object') + key = key.data(this.namespaced(C.PROP_IDENTIFIER)); + if (key in this._itemInstances) { + this._itemInstances[key].destroy(); + } }, /** @@ -488,16 +495,16 @@ require('./src/Plugin'); var el = $(ev.target); var container = el.closest('.' + C.SELECTOR_PREFIX + C.SELECTOR_CONTAINER) || false; var source = el.closest(C.DEFAULT_SELECTOR); - var sourceInstance = this._isInited(source) ? this.getItemInstance(source) : false; + //var sourceInstance = this._isInited(source) ? this.getItemInstance(source) : false; var containerInstance = this._isInited(container) ? this.getItemInstance(container) : false; if (!containerInstance || containerInstance && containerInstance.data.trigger !== C.TRIGGER_CLICK) { $.each(this._itemInstances, function (index, item) { - item.isVisible() - && item.data.trigger === C.TRIGGER_CLICK - && (!container || item.el.protip.get(0) !== container.get(0)) - && (!source || item.el.source.get(0) !== source.get(0)) - && item.hide(); + if (item.isVisible() && item.data.trigger === C.TRIGGER_CLICK && + (!container || item.el.protip.get(0) !== container.get(0)) && + (!source || item.el.source.get(0) !== source.get(0))) { + item.hide(); + } }); } }, @@ -586,7 +593,7 @@ require('./src/Plugin'); * * @private */ - _unbind: function(){ + _unbind: function () { $(C.SELECTOR_BODY) .off(C.EVENT_CLICK, $.proxy(this._onBodyClick, this)) .off(C.EVENT_MOUSEOVER, this.settings.selector, $.proxy(this._onAction, this)) @@ -625,6 +632,22 @@ require('./src/Plugin'); "use strict"; var ProtipConstants = { + SKINS: { + default: { + 'pro': {color: '#FFF', background: '#da2e2b'}, + 'blue': {color: '#FFF', background: '#336699'}, + 'red': {color: '#FFF', background: '#802731'}, + 'aqua': {color: '#FFF', background: '#339996'}, + 'dark': {color: '#FFF', background: '#333'}, + 'dark-transparent': {color: '#FFF', background: 'rgba(20,20,20,.8)'}, + 'black': {color: '#FFF', background: '#000'}, + 'leaf': {color: '#FFF', background: '#339959'}, + 'purple': {color: '#FFF', background: '#613399'}, + 'pink': {color: '#FFF', background: '#D457AA'}, + 'orange': {color: '#FFF', background: '#E64426'}, + 'white': {color: '#333', border: '#777', background: '#FFF'} + } + }, PLACEMENT_CENTER: 'center', PLACEMENT_INSIDE: 'inside', PLACEMENT_OUTSIDE: 'outside', @@ -685,19 +708,21 @@ require('./src/Plugin'); DEFAULT_NAMESPACE: 'pt', DEFAULT_DELAY_OUT: 100, - SELECTOR_PREFIX: 'protip-', - SELECTOR_BODY: 'body', - SELECTOR_ARROW: 'arrow', - SELECTOR_CONTAINER: 'container', - SELECTOR_SHOW: 'protip-show', - SELECTOR_CLOSE: '.protip-close', - SELECTOR_SKIN_PREFIX: 'protip-skin-', - SELECTOR_SIZE_PREFIX: '--size-', - SELECTOR_SCHEME_PREFIX: '--scheme-', - SELECTOR_ANIMATE: 'animated', - SELECTOR_TARGET: '.protip-target', - SELECTOR_MIXIN_PREFIX: 'protip-mixin--', - SELECTOR_OPEN: 'protip-open', + SELECTOR_PREFIX: 'protip-', + SELECTOR_BODY: 'body', + SELECTOR_ARROW: 'arrow', + SELECTOR_ARROW_BORDER: 'arrow-border', + SELECTOR_CONTAINER: 'container', + SELECTOR_SHOW: 'protip-show', + SELECTOR_CLOSE: '.protip-close', + SELECTOR_SKIN_PREFIX: 'protip-skin-', + SELECTOR_SIZE_PREFIX: '--size-', + SELECTOR_SCHEME_PREFIX: '--scheme-', + SELECTOR_ANIMATE: 'animated', + SELECTOR_TARGET: '.protip-target', + SELECTOR_MIXIN_PREFIX: 'protip-mixin--', + SELECTOR_OPEN: 'protip-open', + SELECTOR_CONTENT: '.protip-content', TEMPLATE_PROTIP: '
{arrow}{icon}
{content}
', TEMPLATE_ICON: '', @@ -714,7 +739,7 @@ require('./src/Plugin'); PSEUDO_THIS: 'this' }; - ProtipConstants.TEMPLATE_ARROW = ''; + ProtipConstants.TEMPLATE_ARROW = ''; return ProtipConstants; })); @@ -987,11 +1012,8 @@ require('./src/Plugin'); } } - // Set first for prior - this._item.data.position = this._positionList[0].key; - // Return the result if we had one. Return values for the default position if not. - return this._result || new PositionCalculator(this._item); + return this._result || new PositionCalculator(this._item, this._positionList[0].key); }, /** @@ -1005,6 +1027,7 @@ require('./src/Plugin'); _test: function(position){ this._setProtipMinWidth(); var result = new PositionCalculator(this._item, position.key, position); + delete result.position; this._item.el.protip.css(result); this._setProtipDimensions(); @@ -1266,7 +1289,7 @@ require('./src/Plugin'); }, /** - * Destroys the current intance. + * Destroys the current instance. * Reset data, hide, unbind, remove. */ destroy: function(){ @@ -1275,8 +1298,7 @@ require('./src/Plugin'); this.el.protip.remove(); this.el.source .data(this._namespaced(C.PROP_INITED), false) - .data(this._namespaced(C.PROP_IDENTIFIER), false) - .removeData(); + .data(this._namespaced(C.PROP_IDENTIFIER), false); this.classInstance.onItemDestroyed(this.data.identifier); $.each(this._task, function(k, task){ clearTimeout(task); @@ -1304,6 +1326,65 @@ require('./src/Plugin'); } }, + applyColors: function (style) { + var def_style = {}; + if (this.data.skin in C.SKINS && this.data.scheme in C.SKINS[this.data.skin]) { + def_style = C.SKINS[this.data.skin][this.data.scheme]; + } + if (this.data.background) { + def_style.background = this.data.background; + } + if (this.data.border) { + def_style.border = this.data.border; + } + //Reset borders + this.el.protipArrow.add(this.el.protipArrowBorder).css({ + 'border-top-color': '', + 'border-bottom-color': '', + 'border-left-color': '', + 'border-right-color': '' + }); + switch (this.data.position) { + case C.POSITION_TOP: + case C.POSITION_TOP_LEFT: + case C.POSITION_TOP_RIGHT: + case C.POSITION_CORNER_RIGHT_TOP: + this.el.protipArrow.css({'border-top-color': def_style.background}); + this.el.protipArrowBorder.css({'border-top-color': def_style.border}); + break; + case C.POSITION_RIGHT: + case C.POSITION_RIGHT_TOP: + case C.POSITION_RIGHT_BOTTOM: + case C.POSITION_CORNER_LEFT_TOP: + this.el.protipArrow.css({'border-right-color': def_style.background}); + this.el.protipArrowBorder.css({'border-right-color': def_style.border}); + break; + case C.POSITION_BOTTOM: + case C.POSITION_BOTTOM_LEFT: + case C.POSITION_BOTTOM_RIGHT: + case C.POSITION_CORNER_LEFT_BOTTOM: + this.el.protipArrow.css({'border-bottom-color': def_style.background}); + this.el.protipArrowBorder.css({'border-bottom-color': def_style.border}); + break; + case C.POSITION_LEFT: + case C.POSITION_LEFT_TOP: + case C.POSITION_LEFT_BOTTOM: + case C.POSITION_CORNER_RIGHT_BOTTOM: + this.el.protipArrow.css({'border-left-color': def_style.background}); + this.el.protipArrowBorder.css({'border-left-color': def_style.border}); + break; + } + + style.background = def_style.background; + style.color = def_style.color; + style.border = ''; + + if (def_style.border) { + style.border = '1px solid' + def_style.border; + } + return style; + }, + /** * Make a tooltip visible. * @@ -1344,12 +1425,18 @@ require('./src/Plugin'); // Handle gravity/non-gravity based position calculations if (this.data.gravity) { style = new GravityTester(this); - delete style.position; } else { style = new PositionCalculator(this); } + if (style.position) { + this.data.position = style.position; + } + delete style.position; + + this.applyColors(style); + // Fire show event and add open class this.el.source.addClass(C.SELECTOR_OPEN); !preventTrigger && this.el.source.trigger(C.EVENT_PROTIP_SHOW, this); @@ -1360,10 +1447,11 @@ require('./src/Plugin'); .addClass(C.SELECTOR_SHOW); // If we need animation - this.data.animate && + if (this.data.animate) { this.el.protip .addClass(C.SELECTOR_ANIMATE) .addClass(this.data.animate || this.classInstance.settings.animate); + } // Set visibility this._isVisible = true; @@ -1508,8 +1596,9 @@ require('./src/Plugin'); }); // Convert to jQuery object and append - this.el.protip = $(this.el.protip); - this.el.protipArrow = this.el.protip.find('.' + C.SELECTOR_PREFIX + C.SELECTOR_ARROW); + this.el.protip = $(this.el.protip); + this.el.protipArrow = this.el.protip.find('.' + C.SELECTOR_PREFIX + C.SELECTOR_ARROW); + this.el.protipArrowBorder = this.el.protip.find('.' + C.SELECTOR_PREFIX + C.SELECTOR_ARROW_BORDER); this.el.target.append(this.el.protip); }, @@ -1525,6 +1614,10 @@ require('./src/Plugin'); var size = this.data.size; var scheme = this.data.scheme; + if (skin === 'square') { + classList.push(C.SELECTOR_SKIN_PREFIX + skin); + skin = 'default'; + } // Main container class classList.push(C.SELECTOR_PREFIX + C.SELECTOR_CONTAINER); // Skin class @@ -1690,8 +1783,10 @@ require('./src/Plugin'); * * @private */ - _onProtipMouseleave: function(){ - (this.data.trigger === C.TRIGGER_HOVER) && this.hide(); + _onProtipMouseleave: function () { + if (this.data.trigger === C.TRIGGER_HOVER) { + this.hide(); + } }, /** @@ -1805,12 +1900,12 @@ require('./src/Plugin'); if ($._protipBuffer.isReady()) { return this.each(function (index, el) { el = $(el); - $._protipClassInstance.getItemInstance(el).destroy(); + $._protipClassInstance.destroyItemInstance(el); }); } return this; }, - + /** * Simply sets tooltip to the element but it won't show. * @@ -1820,7 +1915,7 @@ require('./src/Plugin'); if ($._protipBuffer.isReady()) { return this.each(function (index, el) { el = $(el); - $._protipClassInstance.getItemInstance(el).destroy(); + $._protipClassInstance.destroyItemInstance(el); $._protipClassInstance.getItemInstance(el, override); }); } @@ -1837,7 +1932,7 @@ require('./src/Plugin'); if ($._protipBuffer.isReady()) { return this.each(function (index, el) { el = $(el); - $._protipClassInstance.getItemInstance(el).destroy(); + $._protipClassInstance.destroyItemInstance(el); $._protipClassInstance.getItemInstance(el, override).show(true); }); } @@ -2129,14 +2224,14 @@ require('./src/Plugin'); if (this._placement === C.PLACEMENT_INSIDE) position.left -= this._protip.width; if (this._placement === C.PLACEMENT_BORDER) position.left -= this._protip.width / 2; break; - case C.POSITION_RIGHT_TOP: + case C.POSITION_RIGHT_BOTTOM: this._offset.left += (globalOffset + arrowOffset.width); position.left = (this._source.offset.left + this._source.width) - this._target.offset.left + this._offset.left + bodyScrollLeft; position.top = (this._source.offset.top) - this._target.offset.top + this._offset.top + bodyScrollTop; if (this._placement === C.PLACEMENT_INSIDE) position.left -= this._protip.width; if (this._placement === C.PLACEMENT_BORDER) position.left -= this._protip.width / 2; break; - case C.POSITION_RIGHT_BOTTOM: + case C.POSITION_RIGHT_TOP: this._offset.left += (globalOffset + arrowOffset.width); position.left = (this._source.offset.left + this._source.width) - this._target.offset.left + this._offset.left + bodyScrollLeft; position.top = (this._source.offset.top + this._source.height - this._protip.height) - this._target.offset.top + this._offset.top + bodyScrollTop; @@ -2171,14 +2266,14 @@ require('./src/Plugin'); if (this._placement === C.PLACEMENT_INSIDE) position.left += this._protip.width; if (this._placement === C.PLACEMENT_BORDER) position.left += this._protip.width / 2; break; - case C.POSITION_LEFT_TOP: + case C.POSITION_LEFT_BOTTOM: this._offset.left += (globalOffset + arrowOffset.width) * -1; position.left = (this._source.offset.left - this._protip.width) - this._target.offset.left + this._offset.left + bodyScrollLeft; position.top = (this._source.offset.top) - this._target.offset.top + this._offset.top + bodyScrollTop; if (this._placement === C.PLACEMENT_INSIDE) position.left += this._protip.width; if (this._placement === C.PLACEMENT_BORDER) position.left += this._protip.width / 2; break; - case C.POSITION_LEFT_BOTTOM: + case C.POSITION_LEFT_TOP: this._offset.left += (globalOffset + arrowOffset.width) * -1; position.left = (this._source.offset.left - this._protip.width) - this._target.offset.left + this._offset.left + bodyScrollLeft; position.top = (this._source.offset.top + this._source.height - this._protip.height) - this._target.offset.top + this._offset.top + bodyScrollTop; @@ -2235,6 +2330,8 @@ require('./src/Plugin'); position.left = position.left + 'px'; position.top = position.top + 'px'; + position.position = this._position; + return position; } }); diff --git a/bundle.test.js b/bundle.test.js index 9bdc423..01a7197 100644 --- a/bundle.test.js +++ b/bundle.test.js @@ -270,7 +270,7 @@ function fromByteArray (uint8) { } },{}],3:[function(require,module,exports){ -(function (global){ +(function (global,Buffer){ /*! * The buffer module from node.js, for the browser. * @@ -2061,8 +2061,8 @@ function isnan (val) { return val !== val // eslint-disable-line no-self-compare } -}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"base64-js":2,"ieee754":39,"isarray":4}],4:[function(require,module,exports){ +}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {},require("buffer").Buffer) +},{"base64-js":2,"buffer":3,"ieee754":39,"isarray":4}],4:[function(require,module,exports){ var toString = {}.toString; module.exports = Array.isArray || function (arr) { @@ -15713,7 +15713,10 @@ function hasOwnProperty(obj, prop) { animate: false, autoHide: false, autoShow: false, - mixin: null + mixin: null, + background: null, + color: null, + border: null } }, @@ -15809,8 +15812,12 @@ function hasOwnProperty(obj, prop) { * * @param key {string} Item instance identifier. */ - destroyItemInstance: function(key){ - this._itemInstances[key].destroy(); + destroyItemInstance: function (key) { + if (typeof key === 'object') + key = key.data(this.namespaced(C.PROP_IDENTIFIER)); + if (key in this._itemInstances) { + this._itemInstances[key].destroy(); + } }, /** @@ -15962,16 +15969,16 @@ function hasOwnProperty(obj, prop) { var el = $(ev.target); var container = el.closest('.' + C.SELECTOR_PREFIX + C.SELECTOR_CONTAINER) || false; var source = el.closest(C.DEFAULT_SELECTOR); - var sourceInstance = this._isInited(source) ? this.getItemInstance(source) : false; + //var sourceInstance = this._isInited(source) ? this.getItemInstance(source) : false; var containerInstance = this._isInited(container) ? this.getItemInstance(container) : false; if (!containerInstance || containerInstance && containerInstance.data.trigger !== C.TRIGGER_CLICK) { $.each(this._itemInstances, function (index, item) { - item.isVisible() - && item.data.trigger === C.TRIGGER_CLICK - && (!container || item.el.protip.get(0) !== container.get(0)) - && (!source || item.el.source.get(0) !== source.get(0)) - && item.hide(); + if (item.isVisible() && item.data.trigger === C.TRIGGER_CLICK && + (!container || item.el.protip.get(0) !== container.get(0)) && + (!source || item.el.source.get(0) !== source.get(0))) { + item.hide(); + } }); } }, @@ -16060,7 +16067,7 @@ function hasOwnProperty(obj, prop) { * * @private */ - _unbind: function(){ + _unbind: function () { $(C.SELECTOR_BODY) .off(C.EVENT_CLICK, $.proxy(this._onBodyClick, this)) .off(C.EVENT_MOUSEOVER, this.settings.selector, $.proxy(this._onAction, this)) @@ -16099,6 +16106,22 @@ function hasOwnProperty(obj, prop) { "use strict"; var ProtipConstants = { + SKINS: { + default: { + 'pro': {color: '#FFF', background: '#da2e2b'}, + 'blue': {color: '#FFF', background: '#336699'}, + 'red': {color: '#FFF', background: '#802731'}, + 'aqua': {color: '#FFF', background: '#339996'}, + 'dark': {color: '#FFF', background: '#333'}, + 'dark-transparent': {color: '#FFF', background: 'rgba(20,20,20,.8)'}, + 'black': {color: '#FFF', background: '#000'}, + 'leaf': {color: '#FFF', background: '#339959'}, + 'purple': {color: '#FFF', background: '#613399'}, + 'pink': {color: '#FFF', background: '#D457AA'}, + 'orange': {color: '#FFF', background: '#E64426'}, + 'white': {color: '#333', border: '#777', background: '#FFF'} + } + }, PLACEMENT_CENTER: 'center', PLACEMENT_INSIDE: 'inside', PLACEMENT_OUTSIDE: 'outside', @@ -16159,19 +16182,21 @@ function hasOwnProperty(obj, prop) { DEFAULT_NAMESPACE: 'pt', DEFAULT_DELAY_OUT: 100, - SELECTOR_PREFIX: 'protip-', - SELECTOR_BODY: 'body', - SELECTOR_ARROW: 'arrow', - SELECTOR_CONTAINER: 'container', - SELECTOR_SHOW: 'protip-show', - SELECTOR_CLOSE: '.protip-close', - SELECTOR_SKIN_PREFIX: 'protip-skin-', - SELECTOR_SIZE_PREFIX: '--size-', - SELECTOR_SCHEME_PREFIX: '--scheme-', - SELECTOR_ANIMATE: 'animated', - SELECTOR_TARGET: '.protip-target', - SELECTOR_MIXIN_PREFIX: 'protip-mixin--', - SELECTOR_OPEN: 'protip-open', + SELECTOR_PREFIX: 'protip-', + SELECTOR_BODY: 'body', + SELECTOR_ARROW: 'arrow', + SELECTOR_ARROW_BORDER: 'arrow-border', + SELECTOR_CONTAINER: 'container', + SELECTOR_SHOW: 'protip-show', + SELECTOR_CLOSE: '.protip-close', + SELECTOR_SKIN_PREFIX: 'protip-skin-', + SELECTOR_SIZE_PREFIX: '--size-', + SELECTOR_SCHEME_PREFIX: '--scheme-', + SELECTOR_ANIMATE: 'animated', + SELECTOR_TARGET: '.protip-target', + SELECTOR_MIXIN_PREFIX: 'protip-mixin--', + SELECTOR_OPEN: 'protip-open', + SELECTOR_CONTENT: '.protip-content', TEMPLATE_PROTIP: '
{arrow}{icon}
{content}
', TEMPLATE_ICON: '', @@ -16188,7 +16213,7 @@ function hasOwnProperty(obj, prop) { PSEUDO_THIS: 'this' }; - ProtipConstants.TEMPLATE_ARROW = ''; + ProtipConstants.TEMPLATE_ARROW = ''; return ProtipConstants; })); @@ -16461,11 +16486,8 @@ function hasOwnProperty(obj, prop) { } } - // Set first for prior - this._item.data.position = this._positionList[0].key; - // Return the result if we had one. Return values for the default position if not. - return this._result || new PositionCalculator(this._item); + return this._result || new PositionCalculator(this._item, this._positionList[0].key); }, /** @@ -16479,6 +16501,7 @@ function hasOwnProperty(obj, prop) { _test: function(position){ this._setProtipMinWidth(); var result = new PositionCalculator(this._item, position.key, position); + delete result.position; this._item.el.protip.css(result); this._setProtipDimensions(); @@ -16740,7 +16763,7 @@ function hasOwnProperty(obj, prop) { }, /** - * Destroys the current intance. + * Destroys the current instance. * Reset data, hide, unbind, remove. */ destroy: function(){ @@ -16749,8 +16772,7 @@ function hasOwnProperty(obj, prop) { this.el.protip.remove(); this.el.source .data(this._namespaced(C.PROP_INITED), false) - .data(this._namespaced(C.PROP_IDENTIFIER), false) - .removeData(); + .data(this._namespaced(C.PROP_IDENTIFIER), false); this.classInstance.onItemDestroyed(this.data.identifier); $.each(this._task, function(k, task){ clearTimeout(task); @@ -16778,6 +16800,65 @@ function hasOwnProperty(obj, prop) { } }, + applyColors: function (style) { + var def_style = {}; + if (this.data.skin in C.SKINS && this.data.scheme in C.SKINS[this.data.skin]) { + def_style = C.SKINS[this.data.skin][this.data.scheme]; + } + if (this.data.background) { + def_style.background = this.data.background; + } + if (this.data.border) { + def_style.border = this.data.border; + } + //Reset borders + this.el.protipArrow.add(this.el.protipArrowBorder).css({ + 'border-top-color': '', + 'border-bottom-color': '', + 'border-left-color': '', + 'border-right-color': '' + }); + switch (this.data.position) { + case C.POSITION_TOP: + case C.POSITION_TOP_LEFT: + case C.POSITION_TOP_RIGHT: + case C.POSITION_CORNER_RIGHT_TOP: + this.el.protipArrow.css({'border-top-color': def_style.background}); + this.el.protipArrowBorder.css({'border-top-color': def_style.border}); + break; + case C.POSITION_RIGHT: + case C.POSITION_RIGHT_TOP: + case C.POSITION_RIGHT_BOTTOM: + case C.POSITION_CORNER_LEFT_TOP: + this.el.protipArrow.css({'border-right-color': def_style.background}); + this.el.protipArrowBorder.css({'border-right-color': def_style.border}); + break; + case C.POSITION_BOTTOM: + case C.POSITION_BOTTOM_LEFT: + case C.POSITION_BOTTOM_RIGHT: + case C.POSITION_CORNER_LEFT_BOTTOM: + this.el.protipArrow.css({'border-bottom-color': def_style.background}); + this.el.protipArrowBorder.css({'border-bottom-color': def_style.border}); + break; + case C.POSITION_LEFT: + case C.POSITION_LEFT_TOP: + case C.POSITION_LEFT_BOTTOM: + case C.POSITION_CORNER_RIGHT_BOTTOM: + this.el.protipArrow.css({'border-left-color': def_style.background}); + this.el.protipArrowBorder.css({'border-left-color': def_style.border}); + break; + } + + style.background = def_style.background; + style.color = def_style.color; + style.border = ''; + + if (def_style.border) { + style.border = '1px solid' + def_style.border; + } + return style; + }, + /** * Make a tooltip visible. * @@ -16818,12 +16899,18 @@ function hasOwnProperty(obj, prop) { // Handle gravity/non-gravity based position calculations if (this.data.gravity) { style = new GravityTester(this); - delete style.position; } else { style = new PositionCalculator(this); } + if (style.position) { + this.data.position = style.position; + } + delete style.position; + + this.applyColors(style); + // Fire show event and add open class this.el.source.addClass(C.SELECTOR_OPEN); !preventTrigger && this.el.source.trigger(C.EVENT_PROTIP_SHOW, this); @@ -16834,10 +16921,11 @@ function hasOwnProperty(obj, prop) { .addClass(C.SELECTOR_SHOW); // If we need animation - this.data.animate && + if (this.data.animate) { this.el.protip .addClass(C.SELECTOR_ANIMATE) .addClass(this.data.animate || this.classInstance.settings.animate); + } // Set visibility this._isVisible = true; @@ -16982,8 +17070,9 @@ function hasOwnProperty(obj, prop) { }); // Convert to jQuery object and append - this.el.protip = $(this.el.protip); - this.el.protipArrow = this.el.protip.find('.' + C.SELECTOR_PREFIX + C.SELECTOR_ARROW); + this.el.protip = $(this.el.protip); + this.el.protipArrow = this.el.protip.find('.' + C.SELECTOR_PREFIX + C.SELECTOR_ARROW); + this.el.protipArrowBorder = this.el.protip.find('.' + C.SELECTOR_PREFIX + C.SELECTOR_ARROW_BORDER); this.el.target.append(this.el.protip); }, @@ -16999,6 +17088,10 @@ function hasOwnProperty(obj, prop) { var size = this.data.size; var scheme = this.data.scheme; + if (skin === 'square') { + classList.push(C.SELECTOR_SKIN_PREFIX + skin); + skin = 'default'; + } // Main container class classList.push(C.SELECTOR_PREFIX + C.SELECTOR_CONTAINER); // Skin class @@ -17164,8 +17257,10 @@ function hasOwnProperty(obj, prop) { * * @private */ - _onProtipMouseleave: function(){ - (this.data.trigger === C.TRIGGER_HOVER) && this.hide(); + _onProtipMouseleave: function () { + if (this.data.trigger === C.TRIGGER_HOVER) { + this.hide(); + } }, /** @@ -17279,12 +17374,12 @@ function hasOwnProperty(obj, prop) { if ($._protipBuffer.isReady()) { return this.each(function (index, el) { el = $(el); - $._protipClassInstance.getItemInstance(el).destroy(); + $._protipClassInstance.destroyItemInstance(el); }); } return this; }, - + /** * Simply sets tooltip to the element but it won't show. * @@ -17294,7 +17389,7 @@ function hasOwnProperty(obj, prop) { if ($._protipBuffer.isReady()) { return this.each(function (index, el) { el = $(el); - $._protipClassInstance.getItemInstance(el).destroy(); + $._protipClassInstance.destroyItemInstance(el); $._protipClassInstance.getItemInstance(el, override); }); } @@ -17311,7 +17406,7 @@ function hasOwnProperty(obj, prop) { if ($._protipBuffer.isReady()) { return this.each(function (index, el) { el = $(el); - $._protipClassInstance.getItemInstance(el).destroy(); + $._protipClassInstance.destroyItemInstance(el); $._protipClassInstance.getItemInstance(el, override).show(true); }); } @@ -17603,14 +17698,14 @@ function hasOwnProperty(obj, prop) { if (this._placement === C.PLACEMENT_INSIDE) position.left -= this._protip.width; if (this._placement === C.PLACEMENT_BORDER) position.left -= this._protip.width / 2; break; - case C.POSITION_RIGHT_TOP: + case C.POSITION_RIGHT_BOTTOM: this._offset.left += (globalOffset + arrowOffset.width); position.left = (this._source.offset.left + this._source.width) - this._target.offset.left + this._offset.left + bodyScrollLeft; position.top = (this._source.offset.top) - this._target.offset.top + this._offset.top + bodyScrollTop; if (this._placement === C.PLACEMENT_INSIDE) position.left -= this._protip.width; if (this._placement === C.PLACEMENT_BORDER) position.left -= this._protip.width / 2; break; - case C.POSITION_RIGHT_BOTTOM: + case C.POSITION_RIGHT_TOP: this._offset.left += (globalOffset + arrowOffset.width); position.left = (this._source.offset.left + this._source.width) - this._target.offset.left + this._offset.left + bodyScrollLeft; position.top = (this._source.offset.top + this._source.height - this._protip.height) - this._target.offset.top + this._offset.top + bodyScrollTop; @@ -17645,14 +17740,14 @@ function hasOwnProperty(obj, prop) { if (this._placement === C.PLACEMENT_INSIDE) position.left += this._protip.width; if (this._placement === C.PLACEMENT_BORDER) position.left += this._protip.width / 2; break; - case C.POSITION_LEFT_TOP: + case C.POSITION_LEFT_BOTTOM: this._offset.left += (globalOffset + arrowOffset.width) * -1; position.left = (this._source.offset.left - this._protip.width) - this._target.offset.left + this._offset.left + bodyScrollLeft; position.top = (this._source.offset.top) - this._target.offset.top + this._offset.top + bodyScrollTop; if (this._placement === C.PLACEMENT_INSIDE) position.left += this._protip.width; if (this._placement === C.PLACEMENT_BORDER) position.left += this._protip.width / 2; break; - case C.POSITION_LEFT_BOTTOM: + case C.POSITION_LEFT_TOP: this._offset.left += (globalOffset + arrowOffset.width) * -1; position.left = (this._source.offset.left - this._protip.width) - this._target.offset.left + this._offset.left + bodyScrollLeft; position.top = (this._source.offset.top + this._source.height - this._protip.height) - this._target.offset.top + this._offset.top + bodyScrollTop; @@ -17709,6 +17804,8 @@ function hasOwnProperty(obj, prop) { position.left = position.left + 'px'; position.top = position.top + 'px'; + position.position = this._position; + return position; } }); @@ -18093,8 +18190,8 @@ module.exports = '