From 0565bf45e0b0d012dea9e47943fb147ca44b3bb2 Mon Sep 17 00:00:00 2001 From: Tofandel Date: Wed, 20 Mar 2019 01:45:20 +0100 Subject: [PATCH 1/8] Major skin refactor - colors and borders are now handled through js --- README.md | 3 + css/protip.scss | 7 +- css/skin/_default.scss | 553 ++++++++++++++++++++--------------------- css/skin/_square.scss | 224 +---------------- src/Class.js | 162 ++++++------ src/Constants.js | 31 ++- src/GravityTester.js | 5 +- src/Item.js | 192 +++++++++----- src/Plugin.js | 45 ++-- 9 files changed, 553 insertions(+), 669 deletions(-) diff --git a/README.md b/README.md index 52c73c8..be7014e 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 diff --git a/css/protip.scss b/css/protip.scss index 8070e91..1835449 100644 --- a/css/protip.scss +++ b/css/protip.scss @@ -10,7 +10,9 @@ line-height: 1; opacity: 0; pointer-events: none; + font-family: sans-serif; box-sizing: border-box; + transition: opacity 0.2s ease-out; > i { position: absolute; @@ -23,7 +25,7 @@ } } - &-arrow { + &-arrow, &-arrow-border { content: ''; display: block; position: absolute; @@ -32,6 +34,9 @@ border-style: solid; border-color: transparent; } + &-arrow-border { + z-index: -1; + } &-show { opacity: 1; diff --git a/css/skin/_default.scss b/css/skin/_default.scss index 7f8aaa8..06af436 100644 --- a/css/skin/_default.scss +++ b/css/skin/_default.scss @@ -1,293 +1,278 @@ -$_protipDefaultSkinColors: ( - 'pro': #da2e2b, - 'blue': #336699, - 'red': #802731, - 'aqua': #339996, - 'dark': #333, - 'dark-transparent': rgba(20,20,20,.8), - 'black': #000, - 'leaf': #339959, - 'purple': #613399, - 'pink': #D457AA, - 'orange': #E64426, - 'white': #FFF -) !default; - $_protipDefaultSkinSizes: ( - - 'tiny': ( - arrow-size: 4px, - css: ( - padding: 8px, - font-size: 10px, - border-radius: 3px - ) - ), - - 'small': ( - arrow-size: 6px, - css: ( - padding: 13px, - font-size: 12px, - border-radius: 4px - ) - ), - - 'normal': ( - arrow-size: 8px, - css: ( - padding: 16px, - font-size: 15px, - border-radius: 6px - ) - ), - - 'big': ( - arrow-size: 10px, - css: ( - padding: 20px, - font-size: 18px, - border-radius: 8px - ) - ), - - 'large': ( - arrow-size: 12px, - css: ( - padding: 20px, - font-size: 18px, - border-radius: 8px - ) - ) + 'tiny': ( + arrow-size: 4px, + css: ( + padding: 8px, + font-size: 10px, + border-radius: 3px + ) + ), + 'small': ( + arrow-size: 6px, + css: ( + padding: 13px, + font-size: 12px, + border-radius: 4px + ) + ), + 'normal': ( + arrow-size: 8px, + css: ( + padding: 16px, + font-size: 15px, + border-radius: 6px + ) + ), + 'big': ( + arrow-size: 10px, + css: ( + padding: 20px, + font-size: 18px, + border-radius: 8px + ) + ), + 'large': ( + arrow-size: 12px, + css: ( + padding: 20px, + font-size: 18px, + border-radius: 8px + ) + ) ) !default; -@mixin protipDefaultSkinArrowGenerator($skin, $arrow-size, $offset, $cornerRadiusFix) { - - ///////////// TOP - .#{$skin}[data-pt-position="top-left"], - .#{$skin}[data-pt-position="top"], - .#{$skin}[data-pt-position="top-right"] { - .protip-arrow { - top: 100%; - left: auto; - margin: 0 0 0 $arrow-size*-1; - border-width: $arrow-size $arrow-size 0 $arrow-size; - } - } - - .#{$skin}[data-pt-position="top-left"] .protip-arrow {left: $offset} - .#{$skin}[data-pt-position="top"] .protip-arrow {left: 50%} - .#{$skin}[data-pt-position="top-right"] .protip-arrow {left: auto; right: $offset; margin-right: $arrow-size*-1} - - ///////////// BOTTOM - .#{$skin}[data-pt-position="bottom-left"], - .#{$skin}[data-pt-position="bottom"], - .#{$skin}[data-pt-position="bottom-right"] { - .protip-arrow { - top: $arrow-size*-1; - left: auto; - margin: 0 0 0 $arrow-size*-1; - border-width: 0 $arrow-size $arrow-size $arrow-size; - } - } - - .#{$skin}[data-pt-position="bottom-left"] .protip-arrow {left: $offset} - .#{$skin}[data-pt-position="bottom"] .protip-arrow {left: 50%} - .#{$skin}[data-pt-position="bottom-right"] .protip-arrow {left: auto; right: $offset; margin-right: $arrow-size*-1} - - ///////////// LEFT - .#{$skin}[data-pt-position="left-top"], - .#{$skin}[data-pt-position="left"], - .#{$skin}[data-pt-position="left-bottom"] { - .protip-arrow { - top: auto; - left: 100%; - margin: $arrow-size*-1 0 0 0; - border-width: $arrow-size 0 $arrow-size $arrow-size; - } - } - - .#{$skin}[data-pt-position="left-top"] .protip-arrow {top: $offset} - .#{$skin}[data-pt-position="left"] .protip-arrow {top: 50%} - .#{$skin}[data-pt-position="left-bottom"] .protip-arrow {top: auto; bottom: $offset; margin-bottom: $arrow-size*-1} - - ///////////// RIGHT - .#{$skin}[data-pt-position="right-top"], - .#{$skin}[data-pt-position="right"], - .#{$skin}[data-pt-position="right-bottom"] { - .protip-arrow { - top: auto; - right: 100%; - margin: $arrow-size*-1 0 0 0; - border-width: $arrow-size $arrow-size $arrow-size 0; - } - } - - .#{$skin}[data-pt-position="right-top"] .protip-arrow {top: $offset} - .#{$skin}[data-pt-position="right"] .protip-arrow {top: 50%} - .#{$skin}[data-pt-position="right-bottom"] .protip-arrow {top: auto; bottom: $offset; margin-bottom: $arrow-size*-1} - ///////////// - - ///////////// CORNERS - .#{$skin}[data-pt-position="top-left-corner"] { - @if $cornerRadiusFix { - border-bottom-right-radius: 0; - } - - .protip-arrow { - top: 100%; - left: 100%; - margin: 0 0 0 $arrow-size*-1; - border-width: 0 $arrow-size $arrow-size 0; - } - } - - .#{$skin}[data-pt-position="top-right-corner"] { - @if $cornerRadiusFix { - border-bottom-left-radius: 0; - } - - .protip-arrow { - top: 100%; - left: $arrow-size*-1; - margin: 0 0 0 $arrow-size; - border-width: $arrow-size $arrow-size 0 0; - } - } - - .#{$skin}[data-pt-position="bottom-left-corner"] { - @if $cornerRadiusFix { - border-top-right-radius: 0; - } - - .protip-arrow { - top: $arrow-size*-1; - left: 100%; - margin: 0 0 0 $arrow-size*-1; - border-width: 0 0 $arrow-size $arrow-size; - } - } - - .#{$skin}[data-pt-position="bottom-right-corner"] { - @if $cornerRadiusFix { - border-top-left-radius: 0; - } - - .protip-arrow { - top: 0; - left: $arrow-size*-1; - margin: $arrow-size*-1 0 0 $arrow-size; - border-width: $arrow-size 0 0 $arrow-size; - } - } - -} - -@mixin protipColorArrowGenerator($skin, $color) { - - ///////////// TOP - .#{$skin}[data-pt-position="top-left"], - .#{$skin}[data-pt-position="top"], - .#{$skin}[data-pt-position="top-right"] { - .protip-arrow { - border-top-color: $color; - } - } - - ///////////// BOTTOM - .#{$skin}[data-pt-position="bottom-left"], - .#{$skin}[data-pt-position="bottom"], - .#{$skin}[data-pt-position="bottom-right"] { - .protip-arrow { - border-bottom-color: $color; - } - } - - ///////////// LEFT - .#{$skin}[data-pt-position="left-top"], - .#{$skin}[data-pt-position="left"], - .#{$skin}[data-pt-position="left-bottom"] { - .protip-arrow { - border-left-color: $color; - } - } - - ///////////// RIGHT - .#{$skin}[data-pt-position="right-top"], - .#{$skin}[data-pt-position="right"], - .#{$skin}[data-pt-position="right-bottom"] { - .protip-arrow { - border-right-color: $color; - } - } - - ///////////// CORNERS - .#{$skin}[data-pt-position="top-left-corner"] { - .protip-arrow { - border-right-color: $color; - } - } - - .#{$skin}[data-pt-position="top-right-corner"] { - .protip-arrow { - border-top-color: $color; - } - } - - .#{$skin}[data-pt-position="bottom-left-corner"] { - .protip-arrow { - border-bottom-color: $color; - } - } - - .#{$skin}[data-pt-position="bottom-right-corner"] { - .protip-arrow { - border-left-color: $color; - } - } +@mixin protipDefaultSkinArrowGenerator($skin, $arrow-size, $offset, $cornerRadiusFix, $hasBorder) { + + ///////////// TOP + .#{$skin}[data-pt-position="top-left"], + .#{$skin}[data-pt-position="top"], + .#{$skin}[data-pt-position="top-right"] { + .protip-arrow { + top: 100%; + left: auto; + margin: 0 0 0 $arrow-size*-1; + border-width: $arrow-size $arrow-size 0 $arrow-size; + @if $hasBorder { + &-border { + bottom: -1px; + left: 0; + margin: 0 0 0 $arrow-size*-1; + border-width: $arrow-size $arrow-size 0 $arrow-size; + } + } + } + } + + .#{$skin}[data-pt-position="top-left"] .protip-arrow { + left: $offset + } + .#{$skin}[data-pt-position="top"] .protip-arrow { + left: 50% + } + .#{$skin}[data-pt-position="top-right"] .protip-arrow { + right: $offset; + margin-right: $arrow-size*-1 + } + + ///////////// BOTTOM + .#{$skin}[data-pt-position="bottom-left"], + .#{$skin}[data-pt-position="bottom"], + .#{$skin}[data-pt-position="bottom-right"] { + .protip-arrow { + top: $arrow-size*-1; + left: auto; + margin: 0 0 0 $arrow-size*-1; + border-width: 0 $arrow-size $arrow-size $arrow-size; + @if $hasBorder { + &-border { + top: -1px; + left: 0; + margin: 0 0 0 $arrow-size*-1; + border-width: 0 $arrow-size $arrow-size $arrow-size; + } + } + } + } + + .#{$skin}[data-pt-position="bottom-left"] .protip-arrow { + left: $offset + } + .#{$skin}[data-pt-position="bottom"] .protip-arrow { + left: 50% + } + .#{$skin}[data-pt-position="bottom-right"] .protip-arrow { + left: auto; + right: $offset; + margin-right: $arrow-size*-1 + } + + ///////////// LEFT + .#{$skin}[data-pt-position="left-top"], + .#{$skin}[data-pt-position="left"], + .#{$skin}[data-pt-position="left-bottom"] { + .protip-arrow { + top: auto; + left: 100%; + margin: $arrow-size*-1 0 0 0; + border-width: $arrow-size 0 $arrow-size $arrow-size; + @if $hasBorder { + &-border { + top: 0; + right: -1px; + margin: $arrow-size*-1 0 0 0; + border-width: $arrow-size 0 $arrow-size $arrow-size; + } + } + } + } + + .#{$skin}[data-pt-position="left-top"] .protip-arrow { + top: $offset + } + .#{$skin}[data-pt-position="left"] .protip-arrow { + top: 50% + } + .#{$skin}[data-pt-position="left-bottom"] .protip-arrow { + top: auto; + bottom: $offset; + margin-bottom: $arrow-size*-1 + } + + ///////////// RIGHT + .#{$skin}[data-pt-position="right-top"], + .#{$skin}[data-pt-position="right"], + .#{$skin}[data-pt-position="right-bottom"] { + .protip-arrow { + top: auto; + right: 100%; + margin: $arrow-size*-1 0 0 0; + border-width: $arrow-size $arrow-size $arrow-size 0; + @if $hasBorder { + &-border { + top: 0; + left: -1px; + margin: $arrow-size*-1 0 0 0; + border-width: $arrow-size $arrow-size $arrow-size 0; + } + } + } + } + + .#{$skin}[data-pt-position="right-top"] .protip-arrow { + top: $offset + } + .#{$skin}[data-pt-position="right"] .protip-arrow { + top: 50% + } + .#{$skin}[data-pt-position="right-bottom"] .protip-arrow { + top: auto; + bottom: $offset; + margin-bottom: $arrow-size*-1 + } + ///////////// + + ///////////// CORNERS + .#{$skin}[data-pt-position="top-left-corner"] { + @if $cornerRadiusFix { + border-bottom-right-radius: 0; + } + + .protip-arrow { + top: 100%; + left: 100%; + margin: 0 0 0 $arrow-size*-1; + border-width: 0 $arrow-size $arrow-size 0; + + @if $hasBorder { + &-border { + bottom: -2px; + right: $arrow-size*-1; + margin: 0 0 0 $arrow-size*-1-2; + border-width: 0 $arrow-size+2 $arrow-size+2 0; + } + } + } + } + + .#{$skin}[data-pt-position="top-right-corner"] { + @if $cornerRadiusFix { + border-bottom-left-radius: 0; + } + + .protip-arrow { + top: 100%; + left: $arrow-size*-1; + margin: 0 0 0 $arrow-size; + border-width: $arrow-size $arrow-size 0 0; + @if $hasBorder { + &-border { + bottom: -2px; + right: $arrow-size*-1; + margin: 0 0 0 $arrow-size+2; + border-width: $arrow-size+2 $arrow-size+2 0 0; + } + } + } + } + + .#{$skin}[data-pt-position="bottom-left-corner"] { + @if $cornerRadiusFix { + border-top-right-radius: 0; + } + + .protip-arrow { + top: $arrow-size*-1; + left: 100%; + margin: 0 0 0 $arrow-size*-1; + border-width: 0 0 $arrow-size $arrow-size; + @if $hasBorder { + &-border { + top: -2px; + left: 1px; + margin: 0 0 0 $arrow-size*-1-2; + border-width: 0 0 $arrow-size+2 $arrow-size+2; + } + } + } + } + + .#{$skin}[data-pt-position="bottom-right-corner"] { + @if $cornerRadiusFix { + border-top-left-radius: 0; + } + + .protip-arrow { + top: 0; + left: $arrow-size*-1; + margin: $arrow-size*-1 0 0 $arrow-size; + border-width: $arrow-size 0 0 $arrow-size; + @if $hasBorder { + &-border { + left: $arrow-size*-1-1; + margin: $arrow-size*-1-1 0 0 $arrow-size+1; + border-width: $arrow-size+1 0 0 $arrow-size+1; + } + } + } + } } // Sizes @each $sizeName, $sizeMap in $_protipDefaultSkinSizes { - $sizeSel: protip-skin-default--size-#{$sizeName}; - - .#{$sizeSel} { - @each $prop, $val in map-get($sizeMap, css) { - #{$prop}: #{$val}; - } - } - - @include protipDefaultSkinArrowGenerator ( - $skin: $sizeSel, - $arrow-size: map-get($sizeMap, arrow-size), - $offset: 20px, - $cornerRadiusFix: 0 - ); + $sizeSel: protip-skin-default--size-#{$sizeName}; + + .#{$sizeSel} { + @each $prop, $val in map-get($sizeMap, css) { + #{$prop}: #{$val}; + } + } + + @include protipDefaultSkinArrowGenerator ( + $skin: $sizeSel, + $arrow-size: map-get($sizeMap, arrow-size), + $offset: 20px, + $cornerRadiusFix: 1, + $hasBorder: 1 + ); } -// Schemes -@each $colorName, $color in $_protipDefaultSkinColors { - - $skinSel: protip-skin-default--scheme-#{$colorName}; - - .#{$skinSel} { - &.protip { - &-container { - @if (lightness($color) > 40) { - color: #000; - } @else { - color: #fff; - } - background: $color; - font-family: sans-serif; - transition: opacity 0.2s ease-out; - } - } - } - - @include protipColorArrowGenerator( - $skin: $skinSel, - $color: $color, - ); -} - diff --git a/css/skin/_square.scss b/css/skin/_square.scss index a865665..5f9cdf8 100644 --- a/css/skin/_square.scss +++ b/css/skin/_square.scss @@ -1,223 +1,5 @@ -$_protipSquareSkinColors: ( - 'pro': #da2e2b, - 'blue': #336699, - 'red': #802731, - 'aqua': #339996, - 'dark-transparent': rgba(20,20,20,.8), - 'dark': #333, - 'black': #000, - 'leaf': #339959, - 'purple': #613399, - 'pink': #D457AA, - 'orange': #E64426, - 'white': #FFF -) !default; -$_protipSquareSkinSizes: ( - - 'tiny': ( - arrow-size: 4px, - css: ( - padding: 8px, - font-size: 10px - ) - ), - - 'small': ( - arrow-size: 6px, - css: ( - padding: 13px, - font-size: 12px - ) - ), - - 'normal': ( - arrow-size: 8px, - css: ( - padding: 16px, - font-size: 15px - ) - ), - - 'big': ( - arrow-size: 10px, - css: ( - padding: 20px, - font-size: 18px - ) - ), - - 'large': ( - arrow-size: 12px, - css: ( - padding: 20px, - font-size: 18px - ) - ) -) !default; - -@mixin protipSquareSkinArrowGenerator($skin, $arrow-size, $offset, $cornerRadiusFix) { - - ///////////// TOP - .#{$skin}[data-pt-position="top-left"], - .#{$skin}[data-pt-position="top"], - .#{$skin}[data-pt-position="top-right"] { - .protip-arrow { - top: 100%; - left: auto; - margin: 0 0 0 $arrow-size*-1; - border-width: $arrow-size $arrow-size 0 $arrow-size; - } - } - - .#{$skin}[data-pt-position="top-left"] .protip-arrow {left: $offset} - .#{$skin}[data-pt-position="top"] .protip-arrow {left: 50%} - .#{$skin}[data-pt-position="top-right"] .protip-arrow {left: auto; right: $offset; margin-right: $arrow-size*-1} - - ///////////// BOTTOM - .#{$skin}[data-pt-position="bottom-left"], - .#{$skin}[data-pt-position="bottom"], - .#{$skin}[data-pt-position="bottom-right"] { - .protip-arrow { - top: $arrow-size*-1; - left: auto; - margin: 0 0 0 $arrow-size*-1; - border-width: 0 $arrow-size $arrow-size $arrow-size; - } - } - - .#{$skin}[data-pt-position="bottom-left"] .protip-arrow {left: $offset} - .#{$skin}[data-pt-position="bottom"] .protip-arrow {left: 50%} - .#{$skin}[data-pt-position="bottom-right"] .protip-arrow {left: auto; right: $offset; margin-right: $arrow-size*-1} - - ///////////// LEFT - .#{$skin}[data-pt-position="left-top"], - .#{$skin}[data-pt-position="left"], - .#{$skin}[data-pt-position="left-bottom"] { - .protip-arrow { - top: auto; - left: 100%; - margin: $arrow-size*-1 0 0 0; - border-width: $arrow-size 0 $arrow-size $arrow-size; - } - } - - .#{$skin}[data-pt-position="left-top"] .protip-arrow {top: $offset} - .#{$skin}[data-pt-position="left"] .protip-arrow {top: 50%} - .#{$skin}[data-pt-position="left-bottom"] .protip-arrow {top: auto; bottom: $offset; margin-bottom: $arrow-size*-1} - - ///////////// RIGHT - .#{$skin}[data-pt-position="right-top"], - .#{$skin}[data-pt-position="right"], - .#{$skin}[data-pt-position="right-bottom"] { - .protip-arrow { - top: auto; - right: 100%; - margin: $arrow-size*-1 0 0 0; - border-width: $arrow-size $arrow-size $arrow-size 0; - } - } - - .#{$skin}[data-pt-position="right-top"] .protip-arrow {top: $offset} - .#{$skin}[data-pt-position="right"] .protip-arrow {top: 50%} - .#{$skin}[data-pt-position="right-bottom"] .protip-arrow {top: auto; bottom: $offset; margin-bottom: $arrow-size*-1} - ///////////// - - ///////////// CORNERS - .#{$skin}[data-pt-position="top-left-corner"] { - @if $cornerRadiusFix { - border-bottom-right-radius: 0; - } - - .protip-arrow { - top: 100%; - left: 100%; - margin: 0 0 0 $arrow-size*-1; - border-width: 0 $arrow-size $arrow-size 0; - } - } - - .#{$skin}[data-pt-position="top-right-corner"] { - @if $cornerRadiusFix { - border-bottom-left-radius: 0; - } - - .protip-arrow { - top: 100%; - left: $arrow-size*-1; - margin: 0 0 0 $arrow-size; - border-width: $arrow-size $arrow-size 0 0; - } - } - - .#{$skin}[data-pt-position="bottom-left-corner"] { - @if $cornerRadiusFix { - border-top-right-radius: 0; - } - - .protip-arrow { - top: $arrow-size*-1; - left: 100%; - margin: 0 0 0 $arrow-size*-1; - border-width: 0 0 $arrow-size $arrow-size; - } - } - - .#{$skin}[data-pt-position="bottom-right-corner"] { - @if $cornerRadiusFix { - border-top-left-radius: 0; - } - - .protip-arrow { - top: 0; - left: $arrow-size*-1; - margin: $arrow-size*-1 0 0 $arrow-size; - border-width: $arrow-size 0 0 $arrow-size; - } - } - -} - -// Sizes -@each $sizeName, $sizeMap in $_protipSquareSkinSizes { - $sizeSel: protip-skin-square--size-#{$sizeName}; - - .#{$sizeSel} { - @each $prop, $val in map-get($sizeMap, css) { - #{$prop}: #{$val}; - } - } - - @include protipSquareSkinArrowGenerator ( - $skin: $sizeSel, - $arrow-size: map-get($sizeMap, arrow-size), - $offset: 20px, - $cornerRadiusFix: 0 - ); -} -// Schemes -@each $colorName, $color in $_protipSquareSkinColors { - - $skinSel: protip-skin-square--scheme-#{$colorName}; - - .#{$skinSel} { - &.protip { - &-container { - @if (lightness($color) > 40) { - color: #000; - } @else { - color: #fff; - } - background: $color; - font-family: sans-serif; - transition: opacity 0.2s ease-out; - } - } - } - - @include protipColorArrowGenerator( - $skin: $skinSel, - $color: $color, - ); -} +.protip-container.square { + border-radius: 0 !important; +} \ No newline at end of file diff --git a/src/Class.js b/src/Class.js index 6930eda..673fde4 100644 --- a/src/Class.js +++ b/src/Class.js @@ -33,10 +33,13 @@ // Lower the interval time, we don't need that much accuracy. try { window.MutationObserver._period = 100; - } catch(e) { + } catch (e) { console.warn("Protip: MutationObserver polyfill haven't been loaded!"); // "Polyfill" for MutationObserver so Protip won't break if the real polyfill not included - window.MutationObserver = window.MutationObserver || function(){this.disconnect=this.observe=function(){}}; + window.MutationObserver = window.MutationObserver || function () { + this.disconnect = this.observe = function () { + }; + }; } /** @@ -46,7 +49,7 @@ * @returns {ProtipClass} * @constructor */ - var ProtipClass = function(settings){ + var ProtipClass = function (settings) { return this._Construct(settings); }; @@ -62,50 +65,53 @@ */ _defaults: { /** @type String Selector for protips */ - selector: C.DEFAULT_SELECTOR, + selector: C.DEFAULT_SELECTOR, /** @type String Namespace of the data attributes */ - namespace: C.DEFAULT_NAMESPACE, + namespace: C.DEFAULT_NAMESPACE, /** @type String Template of protip element */ - protipTemplate: C.TEMPLATE_PROTIP, + protipTemplate: C.TEMPLATE_PROTIP, /** @type String Template of the arrow element */ - arrowTemplate: C.TEMPLATE_ARROW, + arrowTemplate: C.TEMPLATE_ARROW, /** @type String Template of protip icon */ - iconTemplate: C.TEMPLATE_ICON, + iconTemplate: C.TEMPLATE_ICON, /** @type Boolean Should we observe whole document for assertions and removals */ - observer: true, + observer: true, /** @type Number Global offset of all tooltips. */ - offset: 0, + offset: 0, /** @type Boolean Forces the tooltip to have min-width by it's width calculation. */ - forceMinWidth: true, + forceMinWidth: true, /** @type Number Default time for OnResize event Timeout. */ - delayResize: 100, + delayResize: 100, /** @type Object Default data-pt-* values for a tooltip */ defaults: { - trigger: C.TRIGGER_HOVER, - title: null, - inited: false, - delayIn: 0, - delayOut: 0, + trigger: C.TRIGGER_HOVER, + title: null, + inited: false, + delayIn: 0, + delayOut: 0, interactive: false, - gravity: true, - offsetTop: 0, - offsetLeft: 0, - position: C.POSITION_RIGHT, - placement: C.PLACEMENT_OUTSIDE, - classes: null, - arrow: true, - width: 300, - identifier: false, - icon: false, - observer: false, - target: C.SELECTOR_BODY, - skin: C.SKIN_DEFAULT, - size: C.SIZE_DEFAULT, - scheme: C.SCHEME_DEFAULT, - animate: false, - autoHide: false, - autoShow: false, - mixin: null + gravity: true, + offsetTop: 0, + offsetLeft: 0, + position: C.POSITION_RIGHT, + placement: C.PLACEMENT_OUTSIDE, + classes: null, + arrow: true, + width: 300, + identifier: false, + icon: false, + observer: false, + target: C.SELECTOR_BODY, + skin: C.SKIN_DEFAULT, + size: C.SIZE_DEFAULT, + scheme: C.SCHEME_DEFAULT, + animate: false, + autoHide: false, + autoShow: false, + mixin: null, + background: null, + color: null, + border: null } }, @@ -115,7 +121,7 @@ * @returns {ProtipClass} * @private */ - _Construct: function(settings){ + _Construct: function (settings) { /** * Overridden configuration options (extends defaults) * @@ -155,9 +161,9 @@ * @private */ this._task = { - delayIn: undefined, + delayIn: undefined, delayOut: undefined, - resize: undefined + resize: undefined }; // Do some initial things @@ -173,15 +179,15 @@ * Does unbind. * Makes some local references empty. */ - destroy: function(){ + destroy: function () { this._unbind(); - $.each(this._itemInstances, $.proxy(function(key){ + $.each(this._itemInstances, $.proxy(function (key) { this.destroyItemInstance(key); }, this)); - this._itemInstances = undefined; - this.settings = undefined; + this._itemInstances = undefined; + this.settings = undefined; $._protipClassInstance = undefined; }, @@ -191,7 +197,7 @@ * @param string {string} The input string. eq: action * @returns {string} eg: ptAction */ - namespaced: function(string){ + namespaced: function (string) { return this.settings.namespace + string.charAt(0).toUpperCase() + string.slice(1); }, @@ -201,8 +207,10 @@ * * @param key {string} Item instance identifier. */ - destroyItemInstance: function(key){ - this._itemInstances[key].destroy(); + destroyItemInstance: function (key) { + if (key in this._itemInstances) { + this._itemInstances[key].destroy(); + } }, /** @@ -210,7 +218,7 @@ * * @param key */ - onItemDestroyed: function(key){ + onItemDestroyed: function (key) { delete this._itemInstances[key]; }, @@ -222,7 +230,7 @@ * @param override {object} data-pt-* overrides * @returns {ProtipItemClass} */ - createItemInstance: function(el, override){ + createItemInstance: function (el, override) { var id = this._generateId(); this._itemInstances[id] = new ProtipItemClass(id, el, this, override); el.data(this.namespaced(C.PROP_IDENTIFIER), id); @@ -235,7 +243,7 @@ * * @param el {jQuery} Element we reload on. */ - reloadItemInstance: function(el){ + reloadItemInstance: function (el) { var key = el.data(this.namespaced(C.PROP_IDENTIFIER)); this.destroyItemInstance(key); this.createItemInstance(el); @@ -249,7 +257,7 @@ * @param override [object] data-pt-* overridables * @returns {ProtipItemClass} */ - getItemInstance: function(el, override){ + getItemInstance: function (el, override) { var identifier = el.data(this.namespaced(C.PROP_IDENTIFIER)); return this._isInited(el) ? this._itemInstances[identifier] : this.createItemInstance(el, override); }, @@ -260,10 +268,10 @@ * * @private */ - _fetchElements: function(){ + _fetchElements: function () { // Prevent early fetches - setTimeout(function(){ - $(this.settings.selector).each($.proxy(function(index, el){ + setTimeout(function () { + $(this.settings.selector).each($.proxy(function (index, el) { this.getItemInstance($(el)); }, this)); }.bind(this)); @@ -275,7 +283,7 @@ * @returns {string} * @private */ - _generateId: function(){ + _generateId: function () { return new Date().valueOf() + Math.floor(Math.random() * 10000).toString(); }, @@ -286,7 +294,7 @@ * @returns {boolean} * @private */ - _isInited: function(el){ + _isInited: function (el) { return !!el.data(this.namespaced(C.PROP_INITED)); }, @@ -296,8 +304,8 @@ * @param preventTrigger [boolean] Prevent hide event from triggering? * @private */ - _hideAll: function(force, preventTrigger){ - $.each(this._itemInstances, $.proxy(function(index, item){ + _hideAll: function (force, preventTrigger) { + $.each(this._itemInstances, $.proxy(function (index, item) { item.isVisible() && this._visibleBeforeResize.push(item) && item.hide(force, preventTrigger); }, this)); }, @@ -308,8 +316,8 @@ * @param preventTrigger [boolean] Prevent show event from triggering? * @private */ - _showAll: function(force, preventTrigger){ - this._visibleBeforeResize.forEach(function(item){ + _showAll: function (force, preventTrigger) { + this._visibleBeforeResize.forEach(function (item) { item.show(force, preventTrigger); }); }, @@ -320,7 +328,7 @@ * @param ev {Event} Event object. * @private */ - _onAction: function(ev){ + _onAction: function (ev) { var el = $(ev.currentTarget); var item = this.getItemInstance(el); @@ -334,7 +342,7 @@ * * @private */ - _onResize: function(){ + _onResize: function () { !this._task.resize && this._hideAll(true, true); this._task.resize && clearTimeout(this._task.resize); this._task.resize = setTimeout(function () { @@ -350,20 +358,20 @@ * @param ev {Event} Event object. * @private */ - _onBodyClick: function(ev){ - 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; + _onBodyClick: function (ev) { + 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 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(); + } }); } }, @@ -374,7 +382,7 @@ * @param ev {Event} Event object. * @private */ - _onCloseClick: function(ev){ + _onCloseClick: function (ev) { var identifier = $(ev.currentTarget).parents('.' + C.SELECTOR_PREFIX + C.SELECTOR_CONTAINER).data(this.namespaced(C.PROP_IDENTIFIER)); this._itemInstances[identifier] && this._itemInstances[identifier].hide(); }, @@ -385,8 +393,8 @@ * @param mutations {MutationRecord} * @private */ - _mutationObserverCallback: function(mutations) { - mutations.forEach(function(mutation) { + _mutationObserverCallback: function (mutations) { + mutations.forEach(function (mutation) { var node; for (var i = 0; i < mutation.addedNodes.length; i++) { node = $(mutation.addedNodes[i]); @@ -407,7 +415,7 @@ for (var i = 0; i < mutation.removedNodes.length; i++) { var el = $(mutation.removedNodes[i]); - el.find(this.settings.selector).each(function(index, item){ + el.find(this.settings.selector).each(function (index, item) { this.getItemInstance($(item)).destroy(); }.bind(this)); @@ -423,7 +431,7 @@ * * @private */ - _bind: function(){ + _bind: function () { var body = $(C.SELECTOR_BODY); body.on(C.EVENT_CLICK, $.proxy(this._onBodyClick, this)) @@ -452,7 +460,7 @@ * * @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)) diff --git a/src/Constants.js b/src/Constants.js index 7368e83..d5af054 100644 --- a/src/Constants.js +++ b/src/Constants.js @@ -15,6 +15,20 @@ "use strict"; var ProtipConstants = { + SKINS: { + 'pro': {color: '#FFF', border: null, background: '#da2e2b'}, + 'blue': {color: '#FFF', border: null, background: '#336699'}, + 'red': {color: '#FFF', border: null, background: '#802731'}, + 'aqua': {color: '#FFF', border: null, background: '#339996'}, + 'dark': {color: '#FFF', border: null, background: '#333'}, + 'dark-transparent': {color: '#FFF', border: null, background: 'rgba(20,20,20,.8)'}, + 'black': {color: '#FFF', border: null, background: '#000'}, + 'leaf': {color: '#FFF', border: null, background: '#339959'}, + 'purple': {color: '#FFF', border: null, background: '#613399'}, + 'pink': {color: '#FFF', border: null, background: '#D457AA'}, + 'orange': {color: '#FFF', border: null, background: '#E64426'}, + 'white': {color: '#333', border: '#777', background: '#FFF'} + }, PLACEMENT_CENTER: 'center', PLACEMENT_INSIDE: 'inside', PLACEMENT_OUTSIDE: 'outside', @@ -78,13 +92,14 @@ 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_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', @@ -95,16 +110,16 @@ ATTR_WIDTH: 'width', ATTR_MAX_WIDTH: 'max-width', - SKIN_DEFAULT: 'default', - SIZE_DEFAULT: 'normal', - SCHEME_DEFAULT: 'pro', + SKIN_DEFAULT: 'default', + SIZE_DEFAULT: 'normal', + SCHEME_DEFAULT: 'pro', PSEUDO_NEXT: 'next', PSEUDO_PREV: 'prev', PSEUDO_THIS: 'this' }; - ProtipConstants.TEMPLATE_ARROW = ''; + ProtipConstants.TEMPLATE_ARROW = ''; return ProtipConstants; })); \ No newline at end of file diff --git a/src/GravityTester.js b/src/GravityTester.js index 3bf67a4..932bfa3 100644 --- a/src/GravityTester.js +++ b/src/GravityTester.js @@ -94,11 +94,8 @@ } } - // 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); }, /** diff --git a/src/Item.js b/src/Item.js index f2852da..6ebdf04 100644 --- a/src/Item.js +++ b/src/Item.js @@ -45,7 +45,7 @@ * @returns {ProtipItemClass} * @constructor */ - var ProtipItemClass = function(id, el, classInstance, override){ + var ProtipItemClass = function (id, el, classInstance, override) { return this._Construct(id, el, classInstance, override); }; @@ -64,29 +64,29 @@ * @returns {ProtipItemClass} * @private */ - _Construct: function(id, el, classInstance, override){ + _Construct: function (id, el, classInstance, override) { /** @type {object} Override data-pt-* values. */ this._override = override || {}; this._override.identifier = id; /** @type {object} Object storing jQuery elements */ - this.el = {}; + this.el = {}; /** @type {jQuery} The source element. */ - this.el.source = el; + this.el.source = el; /** @type {object} All the data-* properties gathered from the source element. */ - this.data = {}; + this.data = {}; /** @type {ProtipClass} Saving the ProtipClass instance. */ - this.classInstance = classInstance; + this.classInstance = classInstance; /** @type {boolean} Tells us of our protip is currently visible or not. */ - this._isVisible = false; + this._isVisible = false; /** @type {object} Object storing setTimeout tasks */ - this._task = { + this._task = { delayIn: undefined, delayOut: undefined }; @@ -105,7 +105,7 @@ .data(this._namespaced(C.PROP_INITED), true); // Fire ready with some timeout so any script can catch up. - setTimeout(function(){ + setTimeout(function () { this.el.source.trigger(C.EVENT_PROTIP_READY, this) }.bind(this), 10); @@ -117,46 +117,53 @@ * * @param eventType {string} Type of the event. */ - actionHandler: function(eventType){ + actionHandler: function (eventType) { if (this.data.trigger === C.TRIGGER_STICKY) { // No handler needed for sticky } // Handling clicky protips else if ( - eventType === C.EVENT_CLICK - && (this.data.trigger === C.TRIGGER_CLICK || this.data.trigger === C.TRIGGER_CLICK2) + eventType === C.EVENT_CLICK && (this.data.trigger === C.TRIGGER_CLICK || this.data.trigger === C.TRIGGER_CLICK2) ) { this.toggle(); } // Handling mouseover protips else if (this.data.trigger !== C.TRIGGER_CLICK && this.data.trigger !== C.TRIGGER_CLICK2) { - switch(eventType){ + switch (eventType) { case C.EVENT_MOUSEOUT: this.hide(); break; case C.EVENT_MOUSEOVER: this.show(); break; - default: break; + default: + break; } } }, + /*** + * Update the content of a protip instance (In case the title is a selector to an HTML element and the element was modified) + */ + update: function () { + this.data.title = this.data.originalTitle; + this._detectTitle(); + this.el.protip.find('.protip-content').html(this.data.title); + }, /** * Destroys the current intance. * Reset data, hide, unbind, remove. */ - destroy: function(){ + destroy: function () { this.hide(true); this._unbind(); 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){ + $.each(this._task, function (k, task) { clearTimeout(task); }); }, @@ -166,14 +173,14 @@ * * @returns {boolean} */ - isVisible: function(){ + isVisible: function () { return this._isVisible; }, /** * Toggles the tooltip visibility state. */ - toggle: function(){ + toggle: function () { if (this._isVisible) { this.hide(); } @@ -182,13 +189,68 @@ } }, + applyColors: function () { + var def_style; + if (this.data.scheme in C.SKINS) { + def_style = C.SKINS[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_RIGHT_BOTTOM: + 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_LEFT_TOP: + this.el.protipArrow.css({'border-left-color': def_style.background}); + this.el.protipArrowBorder.css({'border-left-color': def_style.border}); + break; + } + + var style = { + background: def_style.background, + color: def_style.color, + border: '' + }; + if (def_style.border) { + style.border = '1px solid' + def_style.border; + } + this.el.protip.css(style); + }, + /** * Make a tooltip visible. * * @param force [boolean] If 'true' there will be no timeouts. * @param preventTrigger [boolean] If 'true' protipShow won't be triggered. */ - show: function(force, preventTrigger){ + show: function (force, preventTrigger) { // No title? Why tooltip? if (!this.data.title) { @@ -202,7 +264,7 @@ // Set new timeout task if needed if (!force && this.data.delayIn) { - this._task.delayIn = setTimeout(function(){ + this._task.delayIn = setTimeout(function () { this.show(true); }.bind(this), this.data.delayIn); @@ -212,7 +274,7 @@ // Auto hide if (this.data.autoHide !== false) { - this._task.autoHide = setTimeout(function(){ + this._task.autoHide = setTimeout(function () { this.hide(true); }.bind(this), this.data.autoHide); } @@ -228,6 +290,8 @@ style = new PositionCalculator(this); } + this.applyColors(); + // Fire show event and add open class this.el.source.addClass(C.SELECTOR_OPEN); !preventTrigger && this.el.source.trigger(C.EVENT_PROTIP_SHOW, this); @@ -238,10 +302,11 @@ .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; @@ -252,7 +317,8 @@ * * @param position */ - applyPosition: function(position){ + applyPosition: function (position) { + this.data.position = position; this.el.protip.attr('data-' + C.DEFAULT_NAMESPACE + '-' + C.PROP_POSITION, position); }, @@ -262,7 +328,7 @@ * @param force [boolean] If 'true' there will be no timeouts. * @param preventTrigger [boolean] If 'true' protipHide event won't be triggered. */ - hide: function(force, preventTrigger) { + hide: function (force, preventTrigger) { this._task.delayOut && clearTimeout(this._task.delayOut); this._task.delayIn && clearTimeout(this._task.delayIn); @@ -270,7 +336,7 @@ // Set new timeout task if needed if (!force && this.data.delayOut) { - this._task.delayOut = setTimeout(function(){ + this._task.delayOut = setTimeout(function () { this.hide(true); }.bind(this), this.data.delayOut); @@ -296,9 +362,9 @@ * * @returns {{width: number, height: number}} */ - getArrowOffset: function(){ + getArrowOffset: function () { return { - width: this.el.protipArrow.outerWidth() || 0, + width: this.el.protipArrow.outerWidth() || 0, height: this.el.protipArrow.outerHeight() || 0 }; }, @@ -309,10 +375,10 @@ * * @private */ - _fetchData: function(){ + _fetchData: function () { // Fetch - $.each(this.classInstance.settings.defaults, $.proxy(function(key){ + $.each(this.classInstance.settings.defaults, $.proxy(function (key) { this.data[key] = this.el.source.data(this._namespaced(key)); }, this)); @@ -321,7 +387,7 @@ this.data = $.extend({}, this.data, this._override); // Now apply back to the element - $.each(this.data, $.proxy(function(key, value){ + $.each(this.data, $.proxy(function (key, value) { this.el.source.data(this._namespaced(key), value); }, this)); }, @@ -331,7 +397,7 @@ * * @private */ - _prepareInternals: function(){ + _prepareInternals: function () { this._setTarget(); this._detectTitle(); this._checkInteractive(); @@ -342,7 +408,7 @@ * * @private */ - _checkInteractive: function(){ + _checkInteractive: function () { if (this.data.interactive) { this.data.delayOut = this.data.delayOut || C.DEFAULT_DELAY_OUT; } @@ -353,7 +419,7 @@ * * @private */ - _initSticky: function(){ + _initSticky: function () { (this.data.trigger === C.TRIGGER_STICKY) && this.show(); }, @@ -362,7 +428,7 @@ * * @private */ - _initAutoShow: function(){ + _initAutoShow: function () { this.data.autoShow && this.show(); }, @@ -372,7 +438,7 @@ * * @private */ - _appendProtip: function(){ + _appendProtip: function () { // Generate HTML from template this.el.protip = nano(this.classInstance.settings.protipTemplate, { @@ -388,6 +454,7 @@ // 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.protipArrowBorder = this.el.protip.find('.' + C.SELECTOR_PREFIX + C.SELECTOR_ARROW_BORDER); this.el.target.append(this.el.protip); }, @@ -397,12 +464,16 @@ * @returns {string} The final class list. * @private */ - _getClassList: function(){ + _getClassList: function () { var classList = []; - var skin = this.data.skin; - var size = this.data.size; - var scheme = this.data.scheme; + var skin = this.data.skin; + var size = this.data.size; + var scheme = this.data.scheme; + if (skin === 'square') { + classList.push('square'); + skin = 'default'; + } // Main container class classList.push(C.SELECTOR_PREFIX + C.SELECTOR_CONTAINER); // Skin class @@ -420,10 +491,10 @@ }, - _parseMixins: function(){ + _parseMixins: function () { var mixin = []; - this.data.mixin && this.data.mixin.split(' ').forEach(function(val){ + this.data.mixin && this.data.mixin.split(' ').forEach(function (val) { val && mixin.push(C.SELECTOR_MIXIN_PREFIX + val); }, this); @@ -436,7 +507,7 @@ * @returns {C.ATTR_MAX_WIDTH || C.ATTR_WIDTH} * @private */ - _getWidthType: function(){ + _getWidthType: function () { return !isNaN(this.data.width) ? C.ATTR_MAX_WIDTH : C.ATTR_WIDTH; }, @@ -446,7 +517,7 @@ * @returns {Number} * @private */ - _getWidth: function(){ + _getWidth: function () { return parseInt(this.data.width, 10); }, @@ -456,7 +527,7 @@ * @returns {string} HTML string * @private */ - _getIconTemplate: function(){ + _getIconTemplate: function () { return this.data.icon ? nano(this.classInstance.settings.iconTemplate, { icon: this.data.icon @@ -469,7 +540,7 @@ * * @private */ - _detectTitle: function(){ + _detectTitle: function () { if (this.data.title && (this.data.title.charAt(0) === '#' || this.data.title.charAt(0) === '.')) { this.data.titleSource = this.data.titleSource || this.data.title; this.data.title = $(this.data.title).html(); @@ -486,12 +557,13 @@ case C.PSEUDO_THIS: this.data.title = this.el.source.html(); break; - default: break; + default: + break; } } // Set to interactive if detects link - if (this.data.title && this.data.title.indexOf(' Date: Wed, 20 Mar 2019 01:52:54 +0100 Subject: [PATCH 2/8] Major skin refactor - colors and borders are now handled through js --- src/Constants.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/Constants.js b/src/Constants.js index d5af054..e3681b1 100644 --- a/src/Constants.js +++ b/src/Constants.js @@ -16,17 +16,17 @@ var ProtipConstants = { SKINS: { - 'pro': {color: '#FFF', border: null, background: '#da2e2b'}, - 'blue': {color: '#FFF', border: null, background: '#336699'}, - 'red': {color: '#FFF', border: null, background: '#802731'}, - 'aqua': {color: '#FFF', border: null, background: '#339996'}, - 'dark': {color: '#FFF', border: null, background: '#333'}, - 'dark-transparent': {color: '#FFF', border: null, background: 'rgba(20,20,20,.8)'}, - 'black': {color: '#FFF', border: null, background: '#000'}, - 'leaf': {color: '#FFF', border: null, background: '#339959'}, - 'purple': {color: '#FFF', border: null, background: '#613399'}, - 'pink': {color: '#FFF', border: null, background: '#D457AA'}, - 'orange': {color: '#FFF', border: null, background: '#E64426'}, + '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', From 76b928cca46090e8332c92d6dc155f2261fcbc4e Mon Sep 17 00:00:00 2001 From: Tofandel Date: Wed, 20 Mar 2019 11:56:53 +0100 Subject: [PATCH 3/8] Maximize Backward compatibility and restore previous formatting --- css/protip.scss | 2 - css/skin-generator.scss | 99 ++++++++++++++++++++++++++++++ css/skin/_default.scss | 5 ++ css/skin/_square.scss | 4 +- src/Constants.js | 57 ++++++++--------- src/Item.js | 132 +++++++++++++++++++++------------------- src/Plugin.js | 37 ++++------- 7 files changed, 214 insertions(+), 122 deletions(-) create mode 100644 css/skin-generator.scss diff --git a/css/protip.scss b/css/protip.scss index 1835449..f1c9876 100644 --- a/css/protip.scss +++ b/css/protip.scss @@ -10,9 +10,7 @@ line-height: 1; opacity: 0; pointer-events: none; - font-family: sans-serif; box-sizing: border-box; - transition: opacity 0.2s ease-out; > i { position: absolute; diff --git a/css/skin-generator.scss b/css/skin-generator.scss new file mode 100644 index 0000000..1fbec77 --- /dev/null +++ b/css/skin-generator.scss @@ -0,0 +1,99 @@ +$_protipDefaultSkinColors: ( + 'pro': #da2e2b, + 'blue': #336699, + 'red': #802731, + 'aqua': #339996, + 'dark': #333, + 'dark-transparent': rgba(20, 20, 20, .8), + 'black': #000, + 'leaf': #339959, + 'purple': #613399, + 'pink': #D457AA, + 'orange': #E64426, + 'white': #FFF +) !default; + +@mixin protipColorArrowGenerator($skin, $color, $hasBorder) { + + ///////////// TOP + .#{$skin}[data-pt-position="top-left"], + .#{$skin}[data-pt-position="top"], + .#{$skin}[data-pt-position="top-right"], + .#{$skin}[data-pt-position="top-right-corner"] { + .protip-arrow { + border-top-color: $color; + @if $hasBorder { + &-border { + border-top-color: #666; + } + } + } + } + + ///////////// BOTTOM + .#{$skin}[data-pt-position="bottom-left"], + .#{$skin}[data-pt-position="bottom"], + .#{$skin}[data-pt-position="bottom-right"], + .#{$skin}[data-pt-position="bottom-left-corner"] { + .protip-arrow { + border-bottom-color: $color; + @if $hasBorder { + &-border { + border-bottom-color: #666; + } + } + } + } + + ///////////// LEFT + .#{$skin}[data-pt-position="left-top"], + .#{$skin}[data-pt-position="left"], + .#{$skin}[data-pt-position="left-bottom"], + .#{$skin}[data-pt-position="bottom-right-corner"] { + .protip-arrow { + border-left-color: $color; + @if $hasBorder { + &-border { + border-left-color: #666; + } + } + } + } + + ///////////// RIGHT + .#{$skin}[data-pt-position="right-top"], + .#{$skin}[data-pt-position="right"], + .#{$skin}[data-pt-position="right-bottom"], + .#{$skin}[data-pt-position="top-left-corner"] { + .protip-arrow { + border-right-color: $color; + @if $hasBorder { + &-border { + border-right-color: #666; + } + } + } + } +} + +// Schemes +@each $colorName, $color in $_protipDefaultSkinColors { + + $skinSel: protip-skin-default--scheme-#{$colorName}; + + .#{$skinSel} { + &.protip { + &-container { + color: #fff; + background: $color; + font-family: sans-serif; + transition: opacity 0.2s ease-out; + } + } + } + + @include protipColorArrowGenerator( + $skin: $skinSel, + $color: $color + ); +} diff --git a/css/skin/_default.scss b/css/skin/_default.scss index 06af436..36eb459 100644 --- a/css/skin/_default.scss +++ b/css/skin/_default.scss @@ -258,6 +258,11 @@ $_protipDefaultSkinSizes: ( } +.protip-container.protip-skin-default { + font-family: sans-serif; + transition: opacity 0.2s ease-out; +} + // Sizes @each $sizeName, $sizeMap in $_protipDefaultSkinSizes { $sizeSel: protip-skin-default--size-#{$sizeName}; diff --git a/css/skin/_square.scss b/css/skin/_square.scss index 5f9cdf8..0ad6a0e 100644 --- a/css/skin/_square.scss +++ b/css/skin/_square.scss @@ -1,5 +1,3 @@ - -.protip-container.square { +.protip-container.protip-skin-square { border-radius: 0 !important; - } \ No newline at end of file diff --git a/src/Constants.js b/src/Constants.js index e3681b1..3f1e4b8 100644 --- a/src/Constants.js +++ b/src/Constants.js @@ -15,19 +15,19 @@ "use strict"; var ProtipConstants = { - SKINS: { - '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'}, + SKINS: { + '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'} + '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', @@ -89,20 +89,21 @@ DEFAULT_NAMESPACE: 'pt', DEFAULT_DELAY_OUT: 100, - 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_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_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: '', @@ -110,9 +111,9 @@ ATTR_WIDTH: 'width', ATTR_MAX_WIDTH: 'max-width', - SKIN_DEFAULT: 'default', - SIZE_DEFAULT: 'normal', - SCHEME_DEFAULT: 'pro', + SKIN_DEFAULT: 'default', + SIZE_DEFAULT: 'normal', + SCHEME_DEFAULT: 'pro', PSEUDO_NEXT: 'next', PSEUDO_PREV: 'prev', diff --git a/src/Item.js b/src/Item.js index 6ebdf04..dd810cd 100644 --- a/src/Item.js +++ b/src/Item.js @@ -45,7 +45,7 @@ * @returns {ProtipItemClass} * @constructor */ - var ProtipItemClass = function (id, el, classInstance, override) { + var ProtipItemClass = function(id, el, classInstance, override){ return this._Construct(id, el, classInstance, override); }; @@ -64,29 +64,29 @@ * @returns {ProtipItemClass} * @private */ - _Construct: function (id, el, classInstance, override) { + _Construct: function(id, el, classInstance, override){ /** @type {object} Override data-pt-* values. */ this._override = override || {}; this._override.identifier = id; /** @type {object} Object storing jQuery elements */ - this.el = {}; + this.el = {}; /** @type {jQuery} The source element. */ - this.el.source = el; + this.el.source = el; /** @type {object} All the data-* properties gathered from the source element. */ - this.data = {}; + this.data = {}; /** @type {ProtipClass} Saving the ProtipClass instance. */ - this.classInstance = classInstance; + this.classInstance = classInstance; /** @type {boolean} Tells us of our protip is currently visible or not. */ - this._isVisible = false; + this._isVisible = false; /** @type {object} Object storing setTimeout tasks */ - this._task = { + this._task = { delayIn: undefined, delayOut: undefined }; @@ -105,7 +105,7 @@ .data(this._namespaced(C.PROP_INITED), true); // Fire ready with some timeout so any script can catch up. - setTimeout(function () { + setTimeout(function(){ this.el.source.trigger(C.EVENT_PROTIP_READY, this) }.bind(this), 10); @@ -117,28 +117,28 @@ * * @param eventType {string} Type of the event. */ - actionHandler: function (eventType) { + actionHandler: function(eventType){ if (this.data.trigger === C.TRIGGER_STICKY) { // No handler needed for sticky } // Handling clicky protips else if ( - eventType === C.EVENT_CLICK && (this.data.trigger === C.TRIGGER_CLICK || this.data.trigger === C.TRIGGER_CLICK2) + eventType === C.EVENT_CLICK + && (this.data.trigger === C.TRIGGER_CLICK || this.data.trigger === C.TRIGGER_CLICK2) ) { this.toggle(); } // Handling mouseover protips else if (this.data.trigger !== C.TRIGGER_CLICK && this.data.trigger !== C.TRIGGER_CLICK2) { - switch (eventType) { + switch(eventType){ case C.EVENT_MOUSEOUT: this.hide(); break; case C.EVENT_MOUSEOVER: this.show(); break; - default: - break; + default: break; } } }, @@ -146,16 +146,16 @@ /*** * Update the content of a protip instance (In case the title is a selector to an HTML element and the element was modified) */ - update: function () { + update: function () { this.data.title = this.data.originalTitle; this._detectTitle(); - this.el.protip.find('.protip-content').html(this.data.title); + this.el.protip.find(C.SELECTOR_CONTENT).html(this.data.title); }, /** * Destroys the current intance. * Reset data, hide, unbind, remove. */ - destroy: function () { + destroy: function(){ this.hide(true); this._unbind(); this.el.protip.remove(); @@ -163,7 +163,7 @@ .data(this._namespaced(C.PROP_INITED), false) .data(this._namespaced(C.PROP_IDENTIFIER), false); this.classInstance.onItemDestroyed(this.data.identifier); - $.each(this._task, function (k, task) { + $.each(this._task, function(k, task){ clearTimeout(task); }); }, @@ -173,14 +173,14 @@ * * @returns {boolean} */ - isVisible: function () { + isVisible: function(){ return this._isVisible; }, /** * Toggles the tooltip visibility state. */ - toggle: function () { + toggle: function(){ if (this._isVisible) { this.hide(); } @@ -201,7 +201,12 @@ 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': ''}); + 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: @@ -235,8 +240,8 @@ var style = { background: def_style.background, - color: def_style.color, - border: '' + color: def_style.color, + border: '' }; if (def_style.border) { style.border = '1px solid' + def_style.border; @@ -250,7 +255,7 @@ * @param force [boolean] If 'true' there will be no timeouts. * @param preventTrigger [boolean] If 'true' protipShow won't be triggered. */ - show: function (force, preventTrigger) { + show: function(force, preventTrigger){ // No title? Why tooltip? if (!this.data.title) { @@ -264,7 +269,7 @@ // Set new timeout task if needed if (!force && this.data.delayIn) { - this._task.delayIn = setTimeout(function () { + this._task.delayIn = setTimeout(function(){ this.show(true); }.bind(this), this.data.delayIn); @@ -274,11 +279,13 @@ // Auto hide if (this.data.autoHide !== false) { - this._task.autoHide = setTimeout(function () { + this._task.autoHide = setTimeout(function(){ this.hide(true); }.bind(this), this.data.autoHide); } + this.update(); + var style; // Handle gravity/non-gravity based position calculations @@ -317,7 +324,7 @@ * * @param position */ - applyPosition: function (position) { + applyPosition: function(position){ this.data.position = position; this.el.protip.attr('data-' + C.DEFAULT_NAMESPACE + '-' + C.PROP_POSITION, position); }, @@ -328,7 +335,7 @@ * @param force [boolean] If 'true' there will be no timeouts. * @param preventTrigger [boolean] If 'true' protipHide event won't be triggered. */ - hide: function (force, preventTrigger) { + hide: function(force, preventTrigger) { this._task.delayOut && clearTimeout(this._task.delayOut); this._task.delayIn && clearTimeout(this._task.delayIn); @@ -336,7 +343,7 @@ // Set new timeout task if needed if (!force && this.data.delayOut) { - this._task.delayOut = setTimeout(function () { + this._task.delayOut = setTimeout(function(){ this.hide(true); }.bind(this), this.data.delayOut); @@ -362,9 +369,9 @@ * * @returns {{width: number, height: number}} */ - getArrowOffset: function () { + getArrowOffset: function(){ return { - width: this.el.protipArrow.outerWidth() || 0, + width: this.el.protipArrow.outerWidth() || 0, height: this.el.protipArrow.outerHeight() || 0 }; }, @@ -375,10 +382,10 @@ * * @private */ - _fetchData: function () { + _fetchData: function(){ // Fetch - $.each(this.classInstance.settings.defaults, $.proxy(function (key) { + $.each(this.classInstance.settings.defaults, $.proxy(function(key){ this.data[key] = this.el.source.data(this._namespaced(key)); }, this)); @@ -387,7 +394,7 @@ this.data = $.extend({}, this.data, this._override); // Now apply back to the element - $.each(this.data, $.proxy(function (key, value) { + $.each(this.data, $.proxy(function(key, value){ this.el.source.data(this._namespaced(key), value); }, this)); }, @@ -397,7 +404,7 @@ * * @private */ - _prepareInternals: function () { + _prepareInternals: function(){ this._setTarget(); this._detectTitle(); this._checkInteractive(); @@ -408,7 +415,7 @@ * * @private */ - _checkInteractive: function () { + _checkInteractive: function(){ if (this.data.interactive) { this.data.delayOut = this.data.delayOut || C.DEFAULT_DELAY_OUT; } @@ -419,7 +426,7 @@ * * @private */ - _initSticky: function () { + _initSticky: function(){ (this.data.trigger === C.TRIGGER_STICKY) && this.show(); }, @@ -428,7 +435,7 @@ * * @private */ - _initAutoShow: function () { + _initAutoShow: function(){ this.data.autoShow && this.show(); }, @@ -438,7 +445,7 @@ * * @private */ - _appendProtip: function () { + _appendProtip: function(){ // Generate HTML from template this.el.protip = nano(this.classInstance.settings.protipTemplate, { @@ -452,8 +459,8 @@ }); // 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); }, @@ -464,14 +471,14 @@ * @returns {string} The final class list. * @private */ - _getClassList: function () { + _getClassList: function(){ var classList = []; - var skin = this.data.skin; - var size = this.data.size; - var scheme = this.data.scheme; + var skin = this.data.skin; + var size = this.data.size; + var scheme = this.data.scheme; if (skin === 'square') { - classList.push('square'); + classList.push(C.SELECTOR_SKIN_PREFIX + skin); skin = 'default'; } // Main container class @@ -491,10 +498,10 @@ }, - _parseMixins: function () { + _parseMixins: function(){ var mixin = []; - this.data.mixin && this.data.mixin.split(' ').forEach(function (val) { + this.data.mixin && this.data.mixin.split(' ').forEach(function(val){ val && mixin.push(C.SELECTOR_MIXIN_PREFIX + val); }, this); @@ -507,7 +514,7 @@ * @returns {C.ATTR_MAX_WIDTH || C.ATTR_WIDTH} * @private */ - _getWidthType: function () { + _getWidthType: function(){ return !isNaN(this.data.width) ? C.ATTR_MAX_WIDTH : C.ATTR_WIDTH; }, @@ -517,7 +524,7 @@ * @returns {Number} * @private */ - _getWidth: function () { + _getWidth: function(){ return parseInt(this.data.width, 10); }, @@ -527,7 +534,7 @@ * @returns {string} HTML string * @private */ - _getIconTemplate: function () { + _getIconTemplate: function(){ return this.data.icon ? nano(this.classInstance.settings.iconTemplate, { icon: this.data.icon @@ -540,7 +547,7 @@ * * @private */ - _detectTitle: function () { + _detectTitle: function(){ if (this.data.title && (this.data.title.charAt(0) === '#' || this.data.title.charAt(0) === '.')) { this.data.titleSource = this.data.titleSource || this.data.title; this.data.title = $(this.data.title).html(); @@ -557,13 +564,12 @@ case C.PSEUDO_THIS: this.data.title = this.el.source.html(); break; - default: - break; + default: break; } } // Set to interactive if detects link - if (this.data.title && this.data.title.indexOf(' Date: Wed, 20 Mar 2019 12:02:39 +0100 Subject: [PATCH 4/8] Maximize Backward compatibility and restore previous formatting --- src/Class.js | 149 +++++++++++++++++++++++++-------------------------- 1 file changed, 73 insertions(+), 76 deletions(-) diff --git a/src/Class.js b/src/Class.js index 673fde4..fe06f87 100644 --- a/src/Class.js +++ b/src/Class.js @@ -33,13 +33,10 @@ // Lower the interval time, we don't need that much accuracy. try { window.MutationObserver._period = 100; - } catch (e) { + } catch(e) { console.warn("Protip: MutationObserver polyfill haven't been loaded!"); // "Polyfill" for MutationObserver so Protip won't break if the real polyfill not included - window.MutationObserver = window.MutationObserver || function () { - this.disconnect = this.observe = function () { - }; - }; + window.MutationObserver = window.MutationObserver || function(){this.disconnect=this.observe=function(){}}; } /** @@ -49,7 +46,7 @@ * @returns {ProtipClass} * @constructor */ - var ProtipClass = function (settings) { + var ProtipClass = function(settings){ return this._Construct(settings); }; @@ -65,53 +62,53 @@ */ _defaults: { /** @type String Selector for protips */ - selector: C.DEFAULT_SELECTOR, + selector: C.DEFAULT_SELECTOR, /** @type String Namespace of the data attributes */ - namespace: C.DEFAULT_NAMESPACE, + namespace: C.DEFAULT_NAMESPACE, /** @type String Template of protip element */ - protipTemplate: C.TEMPLATE_PROTIP, + protipTemplate: C.TEMPLATE_PROTIP, /** @type String Template of the arrow element */ - arrowTemplate: C.TEMPLATE_ARROW, + arrowTemplate: C.TEMPLATE_ARROW, /** @type String Template of protip icon */ - iconTemplate: C.TEMPLATE_ICON, + iconTemplate: C.TEMPLATE_ICON, /** @type Boolean Should we observe whole document for assertions and removals */ - observer: true, + observer: true, /** @type Number Global offset of all tooltips. */ - offset: 0, + offset: 0, /** @type Boolean Forces the tooltip to have min-width by it's width calculation. */ - forceMinWidth: true, + forceMinWidth: true, /** @type Number Default time for OnResize event Timeout. */ - delayResize: 100, + delayResize: 100, /** @type Object Default data-pt-* values for a tooltip */ defaults: { - trigger: C.TRIGGER_HOVER, - title: null, - inited: false, - delayIn: 0, - delayOut: 0, + trigger: C.TRIGGER_HOVER, + title: null, + inited: false, + delayIn: 0, + delayOut: 0, interactive: false, - gravity: true, - offsetTop: 0, - offsetLeft: 0, - position: C.POSITION_RIGHT, - placement: C.PLACEMENT_OUTSIDE, - classes: null, - arrow: true, - width: 300, - identifier: false, - icon: false, - observer: false, - target: C.SELECTOR_BODY, - skin: C.SKIN_DEFAULT, - size: C.SIZE_DEFAULT, - scheme: C.SCHEME_DEFAULT, - animate: false, - autoHide: false, - autoShow: false, - mixin: null, - background: null, - color: null, - border: null + gravity: true, + offsetTop: 0, + offsetLeft: 0, + position: C.POSITION_RIGHT, + placement: C.PLACEMENT_OUTSIDE, + classes: null, + arrow: true, + width: 300, + identifier: false, + icon: false, + observer: false, + target: C.SELECTOR_BODY, + skin: C.SKIN_DEFAULT, + size: C.SIZE_DEFAULT, + scheme: C.SCHEME_DEFAULT, + animate: false, + autoHide: false, + autoShow: false, + mixin: null, + background: null, + color: null, + border: null } }, @@ -121,7 +118,7 @@ * @returns {ProtipClass} * @private */ - _Construct: function (settings) { + _Construct: function(settings){ /** * Overridden configuration options (extends defaults) * @@ -161,9 +158,9 @@ * @private */ this._task = { - delayIn: undefined, + delayIn: undefined, delayOut: undefined, - resize: undefined + resize: undefined }; // Do some initial things @@ -179,15 +176,15 @@ * Does unbind. * Makes some local references empty. */ - destroy: function () { + destroy: function(){ this._unbind(); - $.each(this._itemInstances, $.proxy(function (key) { + $.each(this._itemInstances, $.proxy(function(key){ this.destroyItemInstance(key); }, this)); - this._itemInstances = undefined; - this.settings = undefined; + this._itemInstances = undefined; + this.settings = undefined; $._protipClassInstance = undefined; }, @@ -197,7 +194,7 @@ * @param string {string} The input string. eq: action * @returns {string} eg: ptAction */ - namespaced: function (string) { + namespaced: function(string){ return this.settings.namespace + string.charAt(0).toUpperCase() + string.slice(1); }, @@ -218,7 +215,7 @@ * * @param key */ - onItemDestroyed: function (key) { + onItemDestroyed: function(key){ delete this._itemInstances[key]; }, @@ -230,7 +227,7 @@ * @param override {object} data-pt-* overrides * @returns {ProtipItemClass} */ - createItemInstance: function (el, override) { + createItemInstance: function(el, override){ var id = this._generateId(); this._itemInstances[id] = new ProtipItemClass(id, el, this, override); el.data(this.namespaced(C.PROP_IDENTIFIER), id); @@ -243,7 +240,7 @@ * * @param el {jQuery} Element we reload on. */ - reloadItemInstance: function (el) { + reloadItemInstance: function(el){ var key = el.data(this.namespaced(C.PROP_IDENTIFIER)); this.destroyItemInstance(key); this.createItemInstance(el); @@ -257,7 +254,7 @@ * @param override [object] data-pt-* overridables * @returns {ProtipItemClass} */ - getItemInstance: function (el, override) { + getItemInstance: function(el, override){ var identifier = el.data(this.namespaced(C.PROP_IDENTIFIER)); return this._isInited(el) ? this._itemInstances[identifier] : this.createItemInstance(el, override); }, @@ -268,10 +265,10 @@ * * @private */ - _fetchElements: function () { + _fetchElements: function(){ // Prevent early fetches - setTimeout(function () { - $(this.settings.selector).each($.proxy(function (index, el) { + setTimeout(function(){ + $(this.settings.selector).each($.proxy(function(index, el){ this.getItemInstance($(el)); }, this)); }.bind(this)); @@ -283,7 +280,7 @@ * @returns {string} * @private */ - _generateId: function () { + _generateId: function(){ return new Date().valueOf() + Math.floor(Math.random() * 10000).toString(); }, @@ -294,7 +291,7 @@ * @returns {boolean} * @private */ - _isInited: function (el) { + _isInited: function(el){ return !!el.data(this.namespaced(C.PROP_INITED)); }, @@ -304,8 +301,8 @@ * @param preventTrigger [boolean] Prevent hide event from triggering? * @private */ - _hideAll: function (force, preventTrigger) { - $.each(this._itemInstances, $.proxy(function (index, item) { + _hideAll: function(force, preventTrigger){ + $.each(this._itemInstances, $.proxy(function(index, item){ item.isVisible() && this._visibleBeforeResize.push(item) && item.hide(force, preventTrigger); }, this)); }, @@ -316,8 +313,8 @@ * @param preventTrigger [boolean] Prevent show event from triggering? * @private */ - _showAll: function (force, preventTrigger) { - this._visibleBeforeResize.forEach(function (item) { + _showAll: function(force, preventTrigger){ + this._visibleBeforeResize.forEach(function(item){ item.show(force, preventTrigger); }); }, @@ -328,7 +325,7 @@ * @param ev {Event} Event object. * @private */ - _onAction: function (ev) { + _onAction: function(ev){ var el = $(ev.currentTarget); var item = this.getItemInstance(el); @@ -342,7 +339,7 @@ * * @private */ - _onResize: function () { + _onResize: function(){ !this._task.resize && this._hideAll(true, true); this._task.resize && clearTimeout(this._task.resize); this._task.resize = setTimeout(function () { @@ -358,11 +355,11 @@ * @param ev {Event} Event object. * @private */ - _onBodyClick: function (ev) { - 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; + _onBodyClick: function(ev){ + 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 containerInstance = this._isInited(container) ? this.getItemInstance(container) : false; if (!containerInstance || containerInstance && containerInstance.data.trigger !== C.TRIGGER_CLICK) { @@ -382,7 +379,7 @@ * @param ev {Event} Event object. * @private */ - _onCloseClick: function (ev) { + _onCloseClick: function(ev){ var identifier = $(ev.currentTarget).parents('.' + C.SELECTOR_PREFIX + C.SELECTOR_CONTAINER).data(this.namespaced(C.PROP_IDENTIFIER)); this._itemInstances[identifier] && this._itemInstances[identifier].hide(); }, @@ -393,8 +390,8 @@ * @param mutations {MutationRecord} * @private */ - _mutationObserverCallback: function (mutations) { - mutations.forEach(function (mutation) { + _mutationObserverCallback: function(mutations) { + mutations.forEach(function(mutation) { var node; for (var i = 0; i < mutation.addedNodes.length; i++) { node = $(mutation.addedNodes[i]); @@ -415,7 +412,7 @@ for (var i = 0; i < mutation.removedNodes.length; i++) { var el = $(mutation.removedNodes[i]); - el.find(this.settings.selector).each(function (index, item) { + el.find(this.settings.selector).each(function(index, item){ this.getItemInstance($(item)).destroy(); }.bind(this)); @@ -431,7 +428,7 @@ * * @private */ - _bind: function () { + _bind: function(){ var body = $(C.SELECTOR_BODY); body.on(C.EVENT_CLICK, $.proxy(this._onBodyClick, this)) @@ -460,7 +457,7 @@ * * @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)) From a7c22027467855faf7e98c61141d790558a7daff Mon Sep 17 00:00:00 2001 From: Tofandel Date: Wed, 20 Mar 2019 13:43:22 +0100 Subject: [PATCH 5/8] Restore the mixin but don't actually use it --- css/skin/_default.scss | 62 ++++++++++++++++++++++++++++++++++++++++++ src/Class.js | 1 - src/Item.js | 2 +- 3 files changed, 63 insertions(+), 2 deletions(-) diff --git a/css/skin/_default.scss b/css/skin/_default.scss index 36eb459..30d6d41 100644 --- a/css/skin/_default.scss +++ b/css/skin/_default.scss @@ -255,7 +255,69 @@ $_protipDefaultSkinSizes: ( } } } +} + +@mixin protipColorArrowGenerator($skin, $color, $hasBorder) { + ///////////// TOP + .#{$skin}[data-pt-position="top-left"], + .#{$skin}[data-pt-position="top"], + .#{$skin}[data-pt-position="top-right"], + .#{$skin}[data-pt-position="top-right-corner"] { + .protip-arrow { + border-top-color: $color; + @if $hasBorder { + &-border { + border-top-color: #666; + } + } + } + } + + ///////////// BOTTOM + .#{$skin}[data-pt-position="bottom-left"], + .#{$skin}[data-pt-position="bottom"], + .#{$skin}[data-pt-position="bottom-right"], + .#{$skin}[data-pt-position="bottom-left-corner"] { + .protip-arrow { + border-bottom-color: $color; + @if $hasBorder { + &-border { + border-bottom-color: #666; + } + } + } + } + + ///////////// LEFT + .#{$skin}[data-pt-position="left-top"], + .#{$skin}[data-pt-position="left"], + .#{$skin}[data-pt-position="left-bottom"], + .#{$skin}[data-pt-position="bottom-right-corner"] { + .protip-arrow { + border-left-color: $color; + @if $hasBorder { + &-border { + border-left-color: #666; + } + } + } + } + + ///////////// RIGHT + .#{$skin}[data-pt-position="right-top"], + .#{$skin}[data-pt-position="right"], + .#{$skin}[data-pt-position="right-bottom"], + .#{$skin}[data-pt-position="top-left-corner"] { + .protip-arrow { + border-right-color: $color; + @if $hasBorder { + &-border { + border-right-color: #666; + } + } + } + } } .protip-container.protip-skin-default { diff --git a/src/Class.js b/src/Class.js index fe06f87..68eb265 100644 --- a/src/Class.js +++ b/src/Class.js @@ -359,7 +359,6 @@ 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 containerInstance = this._isInited(container) ? this.getItemInstance(container) : false; if (!containerInstance || containerInstance && containerInstance.data.trigger !== C.TRIGGER_CLICK) { diff --git a/src/Item.js b/src/Item.js index dd810cd..c35aae2 100644 --- a/src/Item.js +++ b/src/Item.js @@ -291,6 +291,7 @@ // Handle gravity/non-gravity based position calculations if (this.data.gravity) { style = new GravityTester(this); + this.data.position = style.position; delete style.position; } else { @@ -325,7 +326,6 @@ * @param position */ applyPosition: function(position){ - this.data.position = position; this.el.protip.attr('data-' + C.DEFAULT_NAMESPACE + '-' + C.PROP_POSITION, position); }, From 3a2b9d0493629b186e043f3f5201fa18556a20c8 Mon Sep 17 00:00:00 2001 From: Tofandel Date: Wed, 20 Mar 2019 14:17:57 +0100 Subject: [PATCH 6/8] Fix protip showing only once --- bundle.js | 174 ++++- bundle.test.js | 180 +++-- css/protip.css | 1722 +++++++-------------------------------------- package.json | 2 +- protip.min.css | 2 +- protip.min.js | 4 +- src/Constants.js | 28 +- src/Item.js | 33 +- test/noDebug.html | 2 +- 9 files changed, 551 insertions(+), 1596 deletions(-) diff --git a/bundle.js b/bundle.js index 5e53d8d..d9d5254 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,10 @@ require('./src/Plugin'); * * @param key {string} Item instance identifier. */ - destroyItemInstance: function(key){ - this._itemInstances[key].destroy(); + destroyItemInstance: function (key) { + if (key in this._itemInstances) { + this._itemInstances[key].destroy(); + } }, /** @@ -488,16 +493,15 @@ 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 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(); + } }); } }, @@ -625,6 +629,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 +705,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 +736,7 @@ require('./src/Plugin'); PSEUDO_THIS: 'this' }; - ProtipConstants.TEMPLATE_ARROW = ''; + ProtipConstants.TEMPLATE_ARROW = ''; return ProtipConstants; })); @@ -987,11 +1009,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); }, /** @@ -1265,6 +1284,14 @@ require('./src/Plugin'); } }, + /*** + * Update the content of a protip instance (In case the title is a selector to an HTML element and the element was modified) + */ + update: function () { + this.data.title = this.data.originalTitle; + this._detectTitle(); + this.el.protip.find(C.SELECTOR_CONTENT).html(this.data.title); + }, /** * Destroys the current intance. * Reset data, hide, unbind, remove. @@ -1275,8 +1302,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 +1330,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_RIGHT_BOTTOM: + 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_LEFT_TOP: + 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. * @@ -1339,17 +1424,22 @@ require('./src/Plugin'); }.bind(this), this.data.autoHide); } + //this.update(); + var style; // Handle gravity/non-gravity based position calculations if (this.data.gravity) { style = new GravityTester(this); + this.data.position = style.position; delete style.position; } else { style = new PositionCalculator(this); } + 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 +1450,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 +1599,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 +1617,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 +1786,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 +1903,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 +1918,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 +1935,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); }); } diff --git a/bundle.test.js b/bundle.test.js index 9bdc423..179f6a4 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,10 @@ function hasOwnProperty(obj, prop) { * * @param key {string} Item instance identifier. */ - destroyItemInstance: function(key){ - this._itemInstances[key].destroy(); + destroyItemInstance: function (key) { + if (key in this._itemInstances) { + this._itemInstances[key].destroy(); + } }, /** @@ -15962,16 +15967,15 @@ 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 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(); + } }); } }, @@ -16099,6 +16103,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 +16179,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 +16210,7 @@ function hasOwnProperty(obj, prop) { PSEUDO_THIS: 'this' }; - ProtipConstants.TEMPLATE_ARROW = ''; + ProtipConstants.TEMPLATE_ARROW = ''; return ProtipConstants; })); @@ -16461,11 +16483,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); }, /** @@ -16739,6 +16758,14 @@ function hasOwnProperty(obj, prop) { } }, + /*** + * Update the content of a protip instance (In case the title is a selector to an HTML element and the element was modified) + */ + update: function () { + this.data.title = this.data.originalTitle; + this._detectTitle(); + this.el.protip.find(C.SELECTOR_CONTENT).html(this.data.title); + }, /** * Destroys the current intance. * Reset data, hide, unbind, remove. @@ -16749,8 +16776,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 +16804,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_RIGHT_BOTTOM: + 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_LEFT_TOP: + 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. * @@ -16813,17 +16898,22 @@ function hasOwnProperty(obj, prop) { }.bind(this), this.data.autoHide); } + //this.update(); + var style; // Handle gravity/non-gravity based position calculations if (this.data.gravity) { style = new GravityTester(this); + this.data.position = style.position; delete style.position; } else { style = new PositionCalculator(this); } + 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 +16924,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 +17073,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 +17091,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 +17260,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 +17377,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 +17392,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 +17409,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); }); } diff --git a/css/protip.css b/css/protip.css index 7c6640a..b8caa96 100644 --- a/css/protip.css +++ b/css/protip.css @@ -28,7 +28,7 @@ body .protip-container.protip-mixin--css-no-style { .protip-container > i + div { padding-left: 20px; } -.protip-arrow { +.protip-arrow, .protip-arrow-border { content: ''; display: block; position: absolute; @@ -37,11 +37,18 @@ body .protip-container.protip-mixin--css-no-style { border-style: solid; border-color: transparent; } +.protip-arrow-border { + z-index: -1; } + .protip-show { opacity: 1; pointer-events: auto; } /* Include skins here which you would like to use */ +.protip-container.protip-skin-default { + font-family: sans-serif; + transition: opacity 0.2s ease-out; } + .protip-skin-default--size-tiny { padding: 8px; font-size: 10px; @@ -54,6 +61,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -4px; border-width: 4px 4px 0 4px; } + .protip-skin-default--size-tiny[data-pt-position="top-left"] .protip-arrow-border, + .protip-skin-default--size-tiny[data-pt-position="top"] .protip-arrow-border, + .protip-skin-default--size-tiny[data-pt-position="top-right"] .protip-arrow-border { + bottom: -1px; + left: 0; + margin: 0 0 0 -4px; + border-width: 4px 4px 0 4px; } .protip-skin-default--size-tiny[data-pt-position="top-left"] .protip-arrow { left: 20px; } @@ -62,7 +76,6 @@ body .protip-container.protip-mixin--css-no-style { left: 50%; } .protip-skin-default--size-tiny[data-pt-position="top-right"] .protip-arrow { - left: auto; right: 20px; margin-right: -4px; } @@ -73,6 +86,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -4px; border-width: 0 4px 4px 4px; } + .protip-skin-default--size-tiny[data-pt-position="bottom-left"] .protip-arrow-border, + .protip-skin-default--size-tiny[data-pt-position="bottom"] .protip-arrow-border, + .protip-skin-default--size-tiny[data-pt-position="bottom-right"] .protip-arrow-border { + top: -1px; + left: 0; + margin: 0 0 0 -4px; + border-width: 0 4px 4px 4px; } .protip-skin-default--size-tiny[data-pt-position="bottom-left"] .protip-arrow { left: 20px; } @@ -92,6 +112,13 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: -4px 0 0 0; border-width: 4px 0 4px 4px; } + .protip-skin-default--size-tiny[data-pt-position="left-top"] .protip-arrow-border, + .protip-skin-default--size-tiny[data-pt-position="left"] .protip-arrow-border, + .protip-skin-default--size-tiny[data-pt-position="left-bottom"] .protip-arrow-border { + top: 0; + right: -1px; + margin: -4px 0 0 0; + border-width: 4px 0 4px 4px; } .protip-skin-default--size-tiny[data-pt-position="left-top"] .protip-arrow { top: 20px; } @@ -111,6 +138,13 @@ body .protip-container.protip-mixin--css-no-style { right: 100%; margin: -4px 0 0 0; border-width: 4px 4px 4px 0; } + .protip-skin-default--size-tiny[data-pt-position="right-top"] .protip-arrow-border, + .protip-skin-default--size-tiny[data-pt-position="right"] .protip-arrow-border, + .protip-skin-default--size-tiny[data-pt-position="right-bottom"] .protip-arrow-border { + top: 0; + left: -1px; + margin: -4px 0 0 0; + border-width: 4px 4px 4px 0; } .protip-skin-default--size-tiny[data-pt-position="right-top"] .protip-arrow { top: 20px; } @@ -130,6 +164,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -4px; border-width: 0 4px 4px 0; } + .protip-skin-default--size-tiny[data-pt-position="top-left-corner"] .protip-arrow-border { + bottom: -2px; + right: -4px; + margin: 0 0 0 -6px; + border-width: 0 6px 6px 0; } .protip-skin-default--size-tiny[data-pt-position="top-right-corner"] { border-bottom-left-radius: 0; } @@ -138,6 +177,11 @@ body .protip-container.protip-mixin--css-no-style { left: -4px; margin: 0 0 0 4px; border-width: 4px 4px 0 0; } + .protip-skin-default--size-tiny[data-pt-position="top-right-corner"] .protip-arrow-border { + bottom: -2px; + right: -4px; + margin: 0 0 0 6px; + border-width: 6px 6px 0 0; } .protip-skin-default--size-tiny[data-pt-position="bottom-left-corner"] { border-top-right-radius: 0; } @@ -146,6 +190,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -4px; border-width: 0 0 4px 4px; } + .protip-skin-default--size-tiny[data-pt-position="bottom-left-corner"] .protip-arrow-border { + top: -2px; + left: 1px; + margin: 0 0 0 -6px; + border-width: 0 0 6px 6px; } .protip-skin-default--size-tiny[data-pt-position="bottom-right-corner"] { border-top-left-radius: 0; } @@ -154,6 +203,10 @@ body .protip-container.protip-mixin--css-no-style { left: -4px; margin: -4px 0 0 4px; border-width: 4px 0 0 4px; } + .protip-skin-default--size-tiny[data-pt-position="bottom-right-corner"] .protip-arrow-border { + left: -5px; + margin: -5px 0 0 5px; + border-width: 5px 0 0 5px; } .protip-skin-default--size-small { padding: 13px; @@ -167,6 +220,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -6px; border-width: 6px 6px 0 6px; } + .protip-skin-default--size-small[data-pt-position="top-left"] .protip-arrow-border, + .protip-skin-default--size-small[data-pt-position="top"] .protip-arrow-border, + .protip-skin-default--size-small[data-pt-position="top-right"] .protip-arrow-border { + bottom: -1px; + left: 0; + margin: 0 0 0 -6px; + border-width: 6px 6px 0 6px; } .protip-skin-default--size-small[data-pt-position="top-left"] .protip-arrow { left: 20px; } @@ -175,7 +235,6 @@ body .protip-container.protip-mixin--css-no-style { left: 50%; } .protip-skin-default--size-small[data-pt-position="top-right"] .protip-arrow { - left: auto; right: 20px; margin-right: -6px; } @@ -186,6 +245,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -6px; border-width: 0 6px 6px 6px; } + .protip-skin-default--size-small[data-pt-position="bottom-left"] .protip-arrow-border, + .protip-skin-default--size-small[data-pt-position="bottom"] .protip-arrow-border, + .protip-skin-default--size-small[data-pt-position="bottom-right"] .protip-arrow-border { + top: -1px; + left: 0; + margin: 0 0 0 -6px; + border-width: 0 6px 6px 6px; } .protip-skin-default--size-small[data-pt-position="bottom-left"] .protip-arrow { left: 20px; } @@ -205,6 +271,13 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: -6px 0 0 0; border-width: 6px 0 6px 6px; } + .protip-skin-default--size-small[data-pt-position="left-top"] .protip-arrow-border, + .protip-skin-default--size-small[data-pt-position="left"] .protip-arrow-border, + .protip-skin-default--size-small[data-pt-position="left-bottom"] .protip-arrow-border { + top: 0; + right: -1px; + margin: -6px 0 0 0; + border-width: 6px 0 6px 6px; } .protip-skin-default--size-small[data-pt-position="left-top"] .protip-arrow { top: 20px; } @@ -224,6 +297,13 @@ body .protip-container.protip-mixin--css-no-style { right: 100%; margin: -6px 0 0 0; border-width: 6px 6px 6px 0; } + .protip-skin-default--size-small[data-pt-position="right-top"] .protip-arrow-border, + .protip-skin-default--size-small[data-pt-position="right"] .protip-arrow-border, + .protip-skin-default--size-small[data-pt-position="right-bottom"] .protip-arrow-border { + top: 0; + left: -1px; + margin: -6px 0 0 0; + border-width: 6px 6px 6px 0; } .protip-skin-default--size-small[data-pt-position="right-top"] .protip-arrow { top: 20px; } @@ -243,6 +323,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -6px; border-width: 0 6px 6px 0; } + .protip-skin-default--size-small[data-pt-position="top-left-corner"] .protip-arrow-border { + bottom: -2px; + right: -6px; + margin: 0 0 0 -8px; + border-width: 0 8px 8px 0; } .protip-skin-default--size-small[data-pt-position="top-right-corner"] { border-bottom-left-radius: 0; } @@ -251,6 +336,11 @@ body .protip-container.protip-mixin--css-no-style { left: -6px; margin: 0 0 0 6px; border-width: 6px 6px 0 0; } + .protip-skin-default--size-small[data-pt-position="top-right-corner"] .protip-arrow-border { + bottom: -2px; + right: -6px; + margin: 0 0 0 8px; + border-width: 8px 8px 0 0; } .protip-skin-default--size-small[data-pt-position="bottom-left-corner"] { border-top-right-radius: 0; } @@ -259,6 +349,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -6px; border-width: 0 0 6px 6px; } + .protip-skin-default--size-small[data-pt-position="bottom-left-corner"] .protip-arrow-border { + top: -2px; + left: 1px; + margin: 0 0 0 -8px; + border-width: 0 0 8px 8px; } .protip-skin-default--size-small[data-pt-position="bottom-right-corner"] { border-top-left-radius: 0; } @@ -267,6 +362,10 @@ body .protip-container.protip-mixin--css-no-style { left: -6px; margin: -6px 0 0 6px; border-width: 6px 0 0 6px; } + .protip-skin-default--size-small[data-pt-position="bottom-right-corner"] .protip-arrow-border { + left: -7px; + margin: -7px 0 0 7px; + border-width: 7px 0 0 7px; } .protip-skin-default--size-normal { padding: 16px; @@ -280,6 +379,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -8px; border-width: 8px 8px 0 8px; } + .protip-skin-default--size-normal[data-pt-position="top-left"] .protip-arrow-border, + .protip-skin-default--size-normal[data-pt-position="top"] .protip-arrow-border, + .protip-skin-default--size-normal[data-pt-position="top-right"] .protip-arrow-border { + bottom: -1px; + left: 0; + margin: 0 0 0 -8px; + border-width: 8px 8px 0 8px; } .protip-skin-default--size-normal[data-pt-position="top-left"] .protip-arrow { left: 20px; } @@ -288,7 +394,6 @@ body .protip-container.protip-mixin--css-no-style { left: 50%; } .protip-skin-default--size-normal[data-pt-position="top-right"] .protip-arrow { - left: auto; right: 20px; margin-right: -8px; } @@ -299,6 +404,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -8px; border-width: 0 8px 8px 8px; } + .protip-skin-default--size-normal[data-pt-position="bottom-left"] .protip-arrow-border, + .protip-skin-default--size-normal[data-pt-position="bottom"] .protip-arrow-border, + .protip-skin-default--size-normal[data-pt-position="bottom-right"] .protip-arrow-border { + top: -1px; + left: 0; + margin: 0 0 0 -8px; + border-width: 0 8px 8px 8px; } .protip-skin-default--size-normal[data-pt-position="bottom-left"] .protip-arrow { left: 20px; } @@ -318,6 +430,13 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: -8px 0 0 0; border-width: 8px 0 8px 8px; } + .protip-skin-default--size-normal[data-pt-position="left-top"] .protip-arrow-border, + .protip-skin-default--size-normal[data-pt-position="left"] .protip-arrow-border, + .protip-skin-default--size-normal[data-pt-position="left-bottom"] .protip-arrow-border { + top: 0; + right: -1px; + margin: -8px 0 0 0; + border-width: 8px 0 8px 8px; } .protip-skin-default--size-normal[data-pt-position="left-top"] .protip-arrow { top: 20px; } @@ -337,6 +456,13 @@ body .protip-container.protip-mixin--css-no-style { right: 100%; margin: -8px 0 0 0; border-width: 8px 8px 8px 0; } + .protip-skin-default--size-normal[data-pt-position="right-top"] .protip-arrow-border, + .protip-skin-default--size-normal[data-pt-position="right"] .protip-arrow-border, + .protip-skin-default--size-normal[data-pt-position="right-bottom"] .protip-arrow-border { + top: 0; + left: -1px; + margin: -8px 0 0 0; + border-width: 8px 8px 8px 0; } .protip-skin-default--size-normal[data-pt-position="right-top"] .protip-arrow { top: 20px; } @@ -356,6 +482,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -8px; border-width: 0 8px 8px 0; } + .protip-skin-default--size-normal[data-pt-position="top-left-corner"] .protip-arrow-border { + bottom: -2px; + right: -8px; + margin: 0 0 0 -10px; + border-width: 0 10px 10px 0; } .protip-skin-default--size-normal[data-pt-position="top-right-corner"] { border-bottom-left-radius: 0; } @@ -364,6 +495,11 @@ body .protip-container.protip-mixin--css-no-style { left: -8px; margin: 0 0 0 8px; border-width: 8px 8px 0 0; } + .protip-skin-default--size-normal[data-pt-position="top-right-corner"] .protip-arrow-border { + bottom: -2px; + right: -8px; + margin: 0 0 0 10px; + border-width: 10px 10px 0 0; } .protip-skin-default--size-normal[data-pt-position="bottom-left-corner"] { border-top-right-radius: 0; } @@ -372,6 +508,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -8px; border-width: 0 0 8px 8px; } + .protip-skin-default--size-normal[data-pt-position="bottom-left-corner"] .protip-arrow-border { + top: -2px; + left: 1px; + margin: 0 0 0 -10px; + border-width: 0 0 10px 10px; } .protip-skin-default--size-normal[data-pt-position="bottom-right-corner"] { border-top-left-radius: 0; } @@ -380,6 +521,10 @@ body .protip-container.protip-mixin--css-no-style { left: -8px; margin: -8px 0 0 8px; border-width: 8px 0 0 8px; } + .protip-skin-default--size-normal[data-pt-position="bottom-right-corner"] .protip-arrow-border { + left: -9px; + margin: -9px 0 0 9px; + border-width: 9px 0 0 9px; } .protip-skin-default--size-big { padding: 20px; @@ -393,6 +538,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -10px; border-width: 10px 10px 0 10px; } + .protip-skin-default--size-big[data-pt-position="top-left"] .protip-arrow-border, + .protip-skin-default--size-big[data-pt-position="top"] .protip-arrow-border, + .protip-skin-default--size-big[data-pt-position="top-right"] .protip-arrow-border { + bottom: -1px; + left: 0; + margin: 0 0 0 -10px; + border-width: 10px 10px 0 10px; } .protip-skin-default--size-big[data-pt-position="top-left"] .protip-arrow { left: 20px; } @@ -401,7 +553,6 @@ body .protip-container.protip-mixin--css-no-style { left: 50%; } .protip-skin-default--size-big[data-pt-position="top-right"] .protip-arrow { - left: auto; right: 20px; margin-right: -10px; } @@ -412,6 +563,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -10px; border-width: 0 10px 10px 10px; } + .protip-skin-default--size-big[data-pt-position="bottom-left"] .protip-arrow-border, + .protip-skin-default--size-big[data-pt-position="bottom"] .protip-arrow-border, + .protip-skin-default--size-big[data-pt-position="bottom-right"] .protip-arrow-border { + top: -1px; + left: 0; + margin: 0 0 0 -10px; + border-width: 0 10px 10px 10px; } .protip-skin-default--size-big[data-pt-position="bottom-left"] .protip-arrow { left: 20px; } @@ -431,6 +589,13 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: -10px 0 0 0; border-width: 10px 0 10px 10px; } + .protip-skin-default--size-big[data-pt-position="left-top"] .protip-arrow-border, + .protip-skin-default--size-big[data-pt-position="left"] .protip-arrow-border, + .protip-skin-default--size-big[data-pt-position="left-bottom"] .protip-arrow-border { + top: 0; + right: -1px; + margin: -10px 0 0 0; + border-width: 10px 0 10px 10px; } .protip-skin-default--size-big[data-pt-position="left-top"] .protip-arrow { top: 20px; } @@ -450,6 +615,13 @@ body .protip-container.protip-mixin--css-no-style { right: 100%; margin: -10px 0 0 0; border-width: 10px 10px 10px 0; } + .protip-skin-default--size-big[data-pt-position="right-top"] .protip-arrow-border, + .protip-skin-default--size-big[data-pt-position="right"] .protip-arrow-border, + .protip-skin-default--size-big[data-pt-position="right-bottom"] .protip-arrow-border { + top: 0; + left: -1px; + margin: -10px 0 0 0; + border-width: 10px 10px 10px 0; } .protip-skin-default--size-big[data-pt-position="right-top"] .protip-arrow { top: 20px; } @@ -469,6 +641,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -10px; border-width: 0 10px 10px 0; } + .protip-skin-default--size-big[data-pt-position="top-left-corner"] .protip-arrow-border { + bottom: -2px; + right: -10px; + margin: 0 0 0 -12px; + border-width: 0 12px 12px 0; } .protip-skin-default--size-big[data-pt-position="top-right-corner"] { border-bottom-left-radius: 0; } @@ -477,6 +654,11 @@ body .protip-container.protip-mixin--css-no-style { left: -10px; margin: 0 0 0 10px; border-width: 10px 10px 0 0; } + .protip-skin-default--size-big[data-pt-position="top-right-corner"] .protip-arrow-border { + bottom: -2px; + right: -10px; + margin: 0 0 0 12px; + border-width: 12px 12px 0 0; } .protip-skin-default--size-big[data-pt-position="bottom-left-corner"] { border-top-right-radius: 0; } @@ -485,6 +667,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -10px; border-width: 0 0 10px 10px; } + .protip-skin-default--size-big[data-pt-position="bottom-left-corner"] .protip-arrow-border { + top: -2px; + left: 1px; + margin: 0 0 0 -12px; + border-width: 0 0 12px 12px; } .protip-skin-default--size-big[data-pt-position="bottom-right-corner"] { border-top-left-radius: 0; } @@ -493,6 +680,10 @@ body .protip-container.protip-mixin--css-no-style { left: -10px; margin: -10px 0 0 10px; border-width: 10px 0 0 10px; } + .protip-skin-default--size-big[data-pt-position="bottom-right-corner"] .protip-arrow-border { + left: -11px; + margin: -11px 0 0 11px; + border-width: 11px 0 0 11px; } .protip-skin-default--size-large { padding: 20px; @@ -506,6 +697,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -12px; border-width: 12px 12px 0 12px; } + .protip-skin-default--size-large[data-pt-position="top-left"] .protip-arrow-border, + .protip-skin-default--size-large[data-pt-position="top"] .protip-arrow-border, + .protip-skin-default--size-large[data-pt-position="top-right"] .protip-arrow-border { + bottom: -1px; + left: 0; + margin: 0 0 0 -12px; + border-width: 12px 12px 0 12px; } .protip-skin-default--size-large[data-pt-position="top-left"] .protip-arrow { left: 20px; } @@ -514,7 +712,6 @@ body .protip-container.protip-mixin--css-no-style { left: 50%; } .protip-skin-default--size-large[data-pt-position="top-right"] .protip-arrow { - left: auto; right: 20px; margin-right: -12px; } @@ -525,6 +722,13 @@ body .protip-container.protip-mixin--css-no-style { left: auto; margin: 0 0 0 -12px; border-width: 0 12px 12px 12px; } + .protip-skin-default--size-large[data-pt-position="bottom-left"] .protip-arrow-border, + .protip-skin-default--size-large[data-pt-position="bottom"] .protip-arrow-border, + .protip-skin-default--size-large[data-pt-position="bottom-right"] .protip-arrow-border { + top: -1px; + left: 0; + margin: 0 0 0 -12px; + border-width: 0 12px 12px 12px; } .protip-skin-default--size-large[data-pt-position="bottom-left"] .protip-arrow { left: 20px; } @@ -544,6 +748,13 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: -12px 0 0 0; border-width: 12px 0 12px 12px; } + .protip-skin-default--size-large[data-pt-position="left-top"] .protip-arrow-border, + .protip-skin-default--size-large[data-pt-position="left"] .protip-arrow-border, + .protip-skin-default--size-large[data-pt-position="left-bottom"] .protip-arrow-border { + top: 0; + right: -1px; + margin: -12px 0 0 0; + border-width: 12px 0 12px 12px; } .protip-skin-default--size-large[data-pt-position="left-top"] .protip-arrow { top: 20px; } @@ -563,6 +774,13 @@ body .protip-container.protip-mixin--css-no-style { right: 100%; margin: -12px 0 0 0; border-width: 12px 12px 12px 0; } + .protip-skin-default--size-large[data-pt-position="right-top"] .protip-arrow-border, + .protip-skin-default--size-large[data-pt-position="right"] .protip-arrow-border, + .protip-skin-default--size-large[data-pt-position="right-bottom"] .protip-arrow-border { + top: 0; + left: -1px; + margin: -12px 0 0 0; + border-width: 12px 12px 12px 0; } .protip-skin-default--size-large[data-pt-position="right-top"] .protip-arrow { top: 20px; } @@ -582,6 +800,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -12px; border-width: 0 12px 12px 0; } + .protip-skin-default--size-large[data-pt-position="top-left-corner"] .protip-arrow-border { + bottom: -2px; + right: -12px; + margin: 0 0 0 -14px; + border-width: 0 14px 14px 0; } .protip-skin-default--size-large[data-pt-position="top-right-corner"] { border-bottom-left-radius: 0; } @@ -590,6 +813,11 @@ body .protip-container.protip-mixin--css-no-style { left: -12px; margin: 0 0 0 12px; border-width: 12px 12px 0 0; } + .protip-skin-default--size-large[data-pt-position="top-right-corner"] .protip-arrow-border { + bottom: -2px; + right: -12px; + margin: 0 0 0 14px; + border-width: 14px 14px 0 0; } .protip-skin-default--size-large[data-pt-position="bottom-left-corner"] { border-top-right-radius: 0; } @@ -598,6 +826,11 @@ body .protip-container.protip-mixin--css-no-style { left: 100%; margin: 0 0 0 -12px; border-width: 0 0 12px 12px; } + .protip-skin-default--size-large[data-pt-position="bottom-left-corner"] .protip-arrow-border { + top: -2px; + left: 1px; + margin: 0 0 0 -14px; + border-width: 0 0 14px 14px; } .protip-skin-default--size-large[data-pt-position="bottom-right-corner"] { border-top-left-radius: 0; } @@ -606,1475 +839,10 @@ body .protip-container.protip-mixin--css-no-style { left: -12px; margin: -12px 0 0 12px; border-width: 12px 0 0 12px; } + .protip-skin-default--size-large[data-pt-position="bottom-right-corner"] .protip-arrow-border { + left: -13px; + margin: -13px 0 0 13px; + border-width: 13px 0 0 13px; } -.protip-skin-default--scheme-pro.protip-container { - color: #000; - background: #da2e2b; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-pro[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-pro[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-pro[data-pt-position="top-right"] .protip-arrow { - border-top-color: #da2e2b; } - -.protip-skin-default--scheme-pro[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-pro[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-pro[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #da2e2b; } - -.protip-skin-default--scheme-pro[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-pro[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-pro[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #da2e2b; } - -.protip-skin-default--scheme-pro[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-pro[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-pro[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #da2e2b; } - -.protip-skin-default--scheme-pro[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #da2e2b; } - -.protip-skin-default--scheme-pro[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #da2e2b; } - -.protip-skin-default--scheme-pro[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #da2e2b; } - -.protip-skin-default--scheme-pro[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #da2e2b; } - -.protip-skin-default--scheme-blue.protip-container { - color: #fff; - background: #336699; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-blue[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-blue[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-blue[data-pt-position="top-right"] .protip-arrow { - border-top-color: #336699; } - -.protip-skin-default--scheme-blue[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-blue[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-blue[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #336699; } - -.protip-skin-default--scheme-blue[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-blue[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-blue[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #336699; } - -.protip-skin-default--scheme-blue[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-blue[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-blue[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #336699; } - -.protip-skin-default--scheme-blue[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #336699; } - -.protip-skin-default--scheme-blue[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #336699; } - -.protip-skin-default--scheme-blue[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #336699; } - -.protip-skin-default--scheme-blue[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #336699; } - -.protip-skin-default--scheme-red.protip-container { - color: #fff; - background: #802731; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-red[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-red[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-red[data-pt-position="top-right"] .protip-arrow { - border-top-color: #802731; } - -.protip-skin-default--scheme-red[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-red[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-red[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #802731; } - -.protip-skin-default--scheme-red[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-red[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-red[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #802731; } - -.protip-skin-default--scheme-red[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-red[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-red[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #802731; } - -.protip-skin-default--scheme-red[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #802731; } - -.protip-skin-default--scheme-red[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #802731; } - -.protip-skin-default--scheme-red[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #802731; } - -.protip-skin-default--scheme-red[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #802731; } - -.protip-skin-default--scheme-aqua.protip-container { - color: #fff; - background: #339996; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-aqua[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-aqua[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-aqua[data-pt-position="top-right"] .protip-arrow { - border-top-color: #339996; } - -.protip-skin-default--scheme-aqua[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-aqua[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-aqua[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #339996; } - -.protip-skin-default--scheme-aqua[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-aqua[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-aqua[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #339996; } - -.protip-skin-default--scheme-aqua[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-aqua[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-aqua[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #339996; } - -.protip-skin-default--scheme-aqua[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #339996; } - -.protip-skin-default--scheme-aqua[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #339996; } - -.protip-skin-default--scheme-aqua[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #339996; } - -.protip-skin-default--scheme-aqua[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #339996; } - -.protip-skin-default--scheme-dark.protip-container { - color: #fff; - background: #333; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-dark[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-dark[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-dark[data-pt-position="top-right"] .protip-arrow { - border-top-color: #333; } - -.protip-skin-default--scheme-dark[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-dark[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-dark[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #333; } - -.protip-skin-default--scheme-dark[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-dark[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-dark[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #333; } - -.protip-skin-default--scheme-dark[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-dark[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-dark[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #333; } - -.protip-skin-default--scheme-dark[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #333; } - -.protip-skin-default--scheme-dark[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #333; } - -.protip-skin-default--scheme-dark[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #333; } - -.protip-skin-default--scheme-dark[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #333; } - -.protip-skin-default--scheme-dark-transparent.protip-container { - color: #fff; - background: rgba(20, 20, 20, 0.8); - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-dark-transparent[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-dark-transparent[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-dark-transparent[data-pt-position="top-right"] .protip-arrow { - border-top-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-default--scheme-dark-transparent[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-dark-transparent[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-dark-transparent[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-default--scheme-dark-transparent[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-dark-transparent[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-dark-transparent[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-default--scheme-dark-transparent[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-default--scheme-dark-transparent[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-default--scheme-black.protip-container { - color: #fff; - background: #000; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-black[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-black[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-black[data-pt-position="top-right"] .protip-arrow { - border-top-color: #000; } - -.protip-skin-default--scheme-black[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-black[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-black[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #000; } - -.protip-skin-default--scheme-black[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-black[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-black[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #000; } - -.protip-skin-default--scheme-black[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-black[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-black[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #000; } - -.protip-skin-default--scheme-black[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #000; } - -.protip-skin-default--scheme-black[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #000; } - -.protip-skin-default--scheme-black[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #000; } - -.protip-skin-default--scheme-black[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #000; } - -.protip-skin-default--scheme-leaf.protip-container { - color: #fff; - background: #339959; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-leaf[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-leaf[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-leaf[data-pt-position="top-right"] .protip-arrow { - border-top-color: #339959; } - -.protip-skin-default--scheme-leaf[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-leaf[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-leaf[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #339959; } - -.protip-skin-default--scheme-leaf[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-leaf[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-leaf[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #339959; } - -.protip-skin-default--scheme-leaf[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-leaf[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-leaf[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #339959; } - -.protip-skin-default--scheme-leaf[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #339959; } - -.protip-skin-default--scheme-leaf[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #339959; } - -.protip-skin-default--scheme-leaf[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #339959; } - -.protip-skin-default--scheme-leaf[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #339959; } - -.protip-skin-default--scheme-purple.protip-container { - color: #fff; - background: #613399; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-purple[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-purple[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-purple[data-pt-position="top-right"] .protip-arrow { - border-top-color: #613399; } - -.protip-skin-default--scheme-purple[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-purple[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-purple[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #613399; } - -.protip-skin-default--scheme-purple[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-purple[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-purple[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #613399; } - -.protip-skin-default--scheme-purple[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-purple[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-purple[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #613399; } - -.protip-skin-default--scheme-purple[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #613399; } - -.protip-skin-default--scheme-purple[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #613399; } - -.protip-skin-default--scheme-purple[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #613399; } - -.protip-skin-default--scheme-purple[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #613399; } - -.protip-skin-default--scheme-pink.protip-container { - color: #000; - background: #D457AA; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-pink[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-pink[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-pink[data-pt-position="top-right"] .protip-arrow { - border-top-color: #D457AA; } - -.protip-skin-default--scheme-pink[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-pink[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-pink[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #D457AA; } - -.protip-skin-default--scheme-pink[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-pink[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-pink[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #D457AA; } - -.protip-skin-default--scheme-pink[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-pink[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-pink[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #D457AA; } - -.protip-skin-default--scheme-pink[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #D457AA; } - -.protip-skin-default--scheme-pink[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #D457AA; } - -.protip-skin-default--scheme-pink[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #D457AA; } - -.protip-skin-default--scheme-pink[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #D457AA; } - -.protip-skin-default--scheme-orange.protip-container { - color: #000; - background: #E64426; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-orange[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-orange[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-orange[data-pt-position="top-right"] .protip-arrow { - border-top-color: #E64426; } - -.protip-skin-default--scheme-orange[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-orange[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-orange[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #E64426; } - -.protip-skin-default--scheme-orange[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-orange[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-orange[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #E64426; } - -.protip-skin-default--scheme-orange[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-orange[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-orange[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #E64426; } - -.protip-skin-default--scheme-orange[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #E64426; } - -.protip-skin-default--scheme-orange[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #E64426; } - -.protip-skin-default--scheme-orange[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #E64426; } - -.protip-skin-default--scheme-orange[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #E64426; } - -.protip-skin-default--scheme-white.protip-container { - color: #000; - background: #FFF; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-default--scheme-white[data-pt-position="top-left"] .protip-arrow, -.protip-skin-default--scheme-white[data-pt-position="top"] .protip-arrow, -.protip-skin-default--scheme-white[data-pt-position="top-right"] .protip-arrow { - border-top-color: #FFF; } - -.protip-skin-default--scheme-white[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-default--scheme-white[data-pt-position="bottom"] .protip-arrow, -.protip-skin-default--scheme-white[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #FFF; } - -.protip-skin-default--scheme-white[data-pt-position="left-top"] .protip-arrow, -.protip-skin-default--scheme-white[data-pt-position="left"] .protip-arrow, -.protip-skin-default--scheme-white[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #FFF; } - -.protip-skin-default--scheme-white[data-pt-position="right-top"] .protip-arrow, -.protip-skin-default--scheme-white[data-pt-position="right"] .protip-arrow, -.protip-skin-default--scheme-white[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #FFF; } - -.protip-skin-default--scheme-white[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #FFF; } - -.protip-skin-default--scheme-white[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #FFF; } - -.protip-skin-default--scheme-white[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #FFF; } - -.protip-skin-default--scheme-white[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #FFF; } - -.protip-skin-square--size-tiny { - padding: 8px; - font-size: 10px; } - -.protip-skin-square--size-tiny[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--size-tiny[data-pt-position="top"] .protip-arrow, -.protip-skin-square--size-tiny[data-pt-position="top-right"] .protip-arrow { - top: 100%; - left: auto; - margin: 0 0 0 -4px; - border-width: 4px 4px 0 4px; } - -.protip-skin-square--size-tiny[data-pt-position="top-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-tiny[data-pt-position="top"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-tiny[data-pt-position="top-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -4px; } - -.protip-skin-square--size-tiny[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--size-tiny[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--size-tiny[data-pt-position="bottom-right"] .protip-arrow { - top: -4px; - left: auto; - margin: 0 0 0 -4px; - border-width: 0 4px 4px 4px; } - -.protip-skin-square--size-tiny[data-pt-position="bottom-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-tiny[data-pt-position="bottom"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-tiny[data-pt-position="bottom-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -4px; } - -.protip-skin-square--size-tiny[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--size-tiny[data-pt-position="left"] .protip-arrow, -.protip-skin-square--size-tiny[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - left: 100%; - margin: -4px 0 0 0; - border-width: 4px 0 4px 4px; } - -.protip-skin-square--size-tiny[data-pt-position="left-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-tiny[data-pt-position="left"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-tiny[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -4px; } - -.protip-skin-square--size-tiny[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--size-tiny[data-pt-position="right"] .protip-arrow, -.protip-skin-square--size-tiny[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - right: 100%; - margin: -4px 0 0 0; - border-width: 4px 4px 4px 0; } - -.protip-skin-square--size-tiny[data-pt-position="right-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-tiny[data-pt-position="right"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-tiny[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -4px; } - -.protip-skin-square--size-tiny[data-pt-position="top-left-corner"] { - border-bottom-right-radius: 0; } - .protip-skin-square--size-tiny[data-pt-position="top-left-corner"] .protip-arrow { - top: 100%; - left: 100%; - margin: 0 0 0 -4px; - border-width: 0 4px 4px 0; } - -.protip-skin-square--size-tiny[data-pt-position="top-right-corner"] { - border-bottom-left-radius: 0; } - .protip-skin-square--size-tiny[data-pt-position="top-right-corner"] .protip-arrow { - top: 100%; - left: -4px; - margin: 0 0 0 4px; - border-width: 4px 4px 0 0; } - -.protip-skin-square--size-tiny[data-pt-position="bottom-left-corner"] { - border-top-right-radius: 0; } - .protip-skin-square--size-tiny[data-pt-position="bottom-left-corner"] .protip-arrow { - top: -4px; - left: 100%; - margin: 0 0 0 -4px; - border-width: 0 0 4px 4px; } - -.protip-skin-square--size-tiny[data-pt-position="bottom-right-corner"] { - border-top-left-radius: 0; } - .protip-skin-square--size-tiny[data-pt-position="bottom-right-corner"] .protip-arrow { - top: 0; - left: -4px; - margin: -4px 0 0 4px; - border-width: 4px 0 0 4px; } - -.protip-skin-square--size-small { - padding: 13px; - font-size: 12px; } - -.protip-skin-square--size-small[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--size-small[data-pt-position="top"] .protip-arrow, -.protip-skin-square--size-small[data-pt-position="top-right"] .protip-arrow { - top: 100%; - left: auto; - margin: 0 0 0 -6px; - border-width: 6px 6px 0 6px; } - -.protip-skin-square--size-small[data-pt-position="top-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-small[data-pt-position="top"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-small[data-pt-position="top-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -6px; } - -.protip-skin-square--size-small[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--size-small[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--size-small[data-pt-position="bottom-right"] .protip-arrow { - top: -6px; - left: auto; - margin: 0 0 0 -6px; - border-width: 0 6px 6px 6px; } - -.protip-skin-square--size-small[data-pt-position="bottom-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-small[data-pt-position="bottom"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-small[data-pt-position="bottom-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -6px; } - -.protip-skin-square--size-small[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--size-small[data-pt-position="left"] .protip-arrow, -.protip-skin-square--size-small[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - left: 100%; - margin: -6px 0 0 0; - border-width: 6px 0 6px 6px; } - -.protip-skin-square--size-small[data-pt-position="left-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-small[data-pt-position="left"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-small[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -6px; } - -.protip-skin-square--size-small[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--size-small[data-pt-position="right"] .protip-arrow, -.protip-skin-square--size-small[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - right: 100%; - margin: -6px 0 0 0; - border-width: 6px 6px 6px 0; } - -.protip-skin-square--size-small[data-pt-position="right-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-small[data-pt-position="right"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-small[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -6px; } - -.protip-skin-square--size-small[data-pt-position="top-left-corner"] { - border-bottom-right-radius: 0; } - .protip-skin-square--size-small[data-pt-position="top-left-corner"] .protip-arrow { - top: 100%; - left: 100%; - margin: 0 0 0 -6px; - border-width: 0 6px 6px 0; } - -.protip-skin-square--size-small[data-pt-position="top-right-corner"] { - border-bottom-left-radius: 0; } - .protip-skin-square--size-small[data-pt-position="top-right-corner"] .protip-arrow { - top: 100%; - left: -6px; - margin: 0 0 0 6px; - border-width: 6px 6px 0 0; } - -.protip-skin-square--size-small[data-pt-position="bottom-left-corner"] { - border-top-right-radius: 0; } - .protip-skin-square--size-small[data-pt-position="bottom-left-corner"] .protip-arrow { - top: -6px; - left: 100%; - margin: 0 0 0 -6px; - border-width: 0 0 6px 6px; } - -.protip-skin-square--size-small[data-pt-position="bottom-right-corner"] { - border-top-left-radius: 0; } - .protip-skin-square--size-small[data-pt-position="bottom-right-corner"] .protip-arrow { - top: 0; - left: -6px; - margin: -6px 0 0 6px; - border-width: 6px 0 0 6px; } - -.protip-skin-square--size-normal { - padding: 16px; - font-size: 15px; } - -.protip-skin-square--size-normal[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--size-normal[data-pt-position="top"] .protip-arrow, -.protip-skin-square--size-normal[data-pt-position="top-right"] .protip-arrow { - top: 100%; - left: auto; - margin: 0 0 0 -8px; - border-width: 8px 8px 0 8px; } - -.protip-skin-square--size-normal[data-pt-position="top-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-normal[data-pt-position="top"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-normal[data-pt-position="top-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -8px; } - -.protip-skin-square--size-normal[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--size-normal[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--size-normal[data-pt-position="bottom-right"] .protip-arrow { - top: -8px; - left: auto; - margin: 0 0 0 -8px; - border-width: 0 8px 8px 8px; } - -.protip-skin-square--size-normal[data-pt-position="bottom-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-normal[data-pt-position="bottom"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-normal[data-pt-position="bottom-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -8px; } - -.protip-skin-square--size-normal[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--size-normal[data-pt-position="left"] .protip-arrow, -.protip-skin-square--size-normal[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - left: 100%; - margin: -8px 0 0 0; - border-width: 8px 0 8px 8px; } - -.protip-skin-square--size-normal[data-pt-position="left-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-normal[data-pt-position="left"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-normal[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -8px; } - -.protip-skin-square--size-normal[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--size-normal[data-pt-position="right"] .protip-arrow, -.protip-skin-square--size-normal[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - right: 100%; - margin: -8px 0 0 0; - border-width: 8px 8px 8px 0; } - -.protip-skin-square--size-normal[data-pt-position="right-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-normal[data-pt-position="right"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-normal[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -8px; } - -.protip-skin-square--size-normal[data-pt-position="top-left-corner"] { - border-bottom-right-radius: 0; } - .protip-skin-square--size-normal[data-pt-position="top-left-corner"] .protip-arrow { - top: 100%; - left: 100%; - margin: 0 0 0 -8px; - border-width: 0 8px 8px 0; } - -.protip-skin-square--size-normal[data-pt-position="top-right-corner"] { - border-bottom-left-radius: 0; } - .protip-skin-square--size-normal[data-pt-position="top-right-corner"] .protip-arrow { - top: 100%; - left: -8px; - margin: 0 0 0 8px; - border-width: 8px 8px 0 0; } - -.protip-skin-square--size-normal[data-pt-position="bottom-left-corner"] { - border-top-right-radius: 0; } - .protip-skin-square--size-normal[data-pt-position="bottom-left-corner"] .protip-arrow { - top: -8px; - left: 100%; - margin: 0 0 0 -8px; - border-width: 0 0 8px 8px; } - -.protip-skin-square--size-normal[data-pt-position="bottom-right-corner"] { - border-top-left-radius: 0; } - .protip-skin-square--size-normal[data-pt-position="bottom-right-corner"] .protip-arrow { - top: 0; - left: -8px; - margin: -8px 0 0 8px; - border-width: 8px 0 0 8px; } - -.protip-skin-square--size-big { - padding: 20px; - font-size: 18px; } - -.protip-skin-square--size-big[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--size-big[data-pt-position="top"] .protip-arrow, -.protip-skin-square--size-big[data-pt-position="top-right"] .protip-arrow { - top: 100%; - left: auto; - margin: 0 0 0 -10px; - border-width: 10px 10px 0 10px; } - -.protip-skin-square--size-big[data-pt-position="top-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-big[data-pt-position="top"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-big[data-pt-position="top-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -10px; } - -.protip-skin-square--size-big[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--size-big[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--size-big[data-pt-position="bottom-right"] .protip-arrow { - top: -10px; - left: auto; - margin: 0 0 0 -10px; - border-width: 0 10px 10px 10px; } - -.protip-skin-square--size-big[data-pt-position="bottom-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-big[data-pt-position="bottom"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-big[data-pt-position="bottom-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -10px; } - -.protip-skin-square--size-big[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--size-big[data-pt-position="left"] .protip-arrow, -.protip-skin-square--size-big[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - left: 100%; - margin: -10px 0 0 0; - border-width: 10px 0 10px 10px; } - -.protip-skin-square--size-big[data-pt-position="left-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-big[data-pt-position="left"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-big[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -10px; } - -.protip-skin-square--size-big[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--size-big[data-pt-position="right"] .protip-arrow, -.protip-skin-square--size-big[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - right: 100%; - margin: -10px 0 0 0; - border-width: 10px 10px 10px 0; } - -.protip-skin-square--size-big[data-pt-position="right-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-big[data-pt-position="right"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-big[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -10px; } - -.protip-skin-square--size-big[data-pt-position="top-left-corner"] { - border-bottom-right-radius: 0; } - .protip-skin-square--size-big[data-pt-position="top-left-corner"] .protip-arrow { - top: 100%; - left: 100%; - margin: 0 0 0 -10px; - border-width: 0 10px 10px 0; } - -.protip-skin-square--size-big[data-pt-position="top-right-corner"] { - border-bottom-left-radius: 0; } - .protip-skin-square--size-big[data-pt-position="top-right-corner"] .protip-arrow { - top: 100%; - left: -10px; - margin: 0 0 0 10px; - border-width: 10px 10px 0 0; } - -.protip-skin-square--size-big[data-pt-position="bottom-left-corner"] { - border-top-right-radius: 0; } - .protip-skin-square--size-big[data-pt-position="bottom-left-corner"] .protip-arrow { - top: -10px; - left: 100%; - margin: 0 0 0 -10px; - border-width: 0 0 10px 10px; } - -.protip-skin-square--size-big[data-pt-position="bottom-right-corner"] { - border-top-left-radius: 0; } - .protip-skin-square--size-big[data-pt-position="bottom-right-corner"] .protip-arrow { - top: 0; - left: -10px; - margin: -10px 0 0 10px; - border-width: 10px 0 0 10px; } - -.protip-skin-square--size-large { - padding: 20px; - font-size: 18px; } - -.protip-skin-square--size-large[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--size-large[data-pt-position="top"] .protip-arrow, -.protip-skin-square--size-large[data-pt-position="top-right"] .protip-arrow { - top: 100%; - left: auto; - margin: 0 0 0 -12px; - border-width: 12px 12px 0 12px; } - -.protip-skin-square--size-large[data-pt-position="top-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-large[data-pt-position="top"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-large[data-pt-position="top-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -12px; } - -.protip-skin-square--size-large[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--size-large[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--size-large[data-pt-position="bottom-right"] .protip-arrow { - top: -12px; - left: auto; - margin: 0 0 0 -12px; - border-width: 0 12px 12px 12px; } - -.protip-skin-square--size-large[data-pt-position="bottom-left"] .protip-arrow { - left: 20px; } - -.protip-skin-square--size-large[data-pt-position="bottom"] .protip-arrow { - left: 50%; } - -.protip-skin-square--size-large[data-pt-position="bottom-right"] .protip-arrow { - left: auto; - right: 20px; - margin-right: -12px; } - -.protip-skin-square--size-large[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--size-large[data-pt-position="left"] .protip-arrow, -.protip-skin-square--size-large[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - left: 100%; - margin: -12px 0 0 0; - border-width: 12px 0 12px 12px; } - -.protip-skin-square--size-large[data-pt-position="left-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-large[data-pt-position="left"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-large[data-pt-position="left-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -12px; } - -.protip-skin-square--size-large[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--size-large[data-pt-position="right"] .protip-arrow, -.protip-skin-square--size-large[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - right: 100%; - margin: -12px 0 0 0; - border-width: 12px 12px 12px 0; } - -.protip-skin-square--size-large[data-pt-position="right-top"] .protip-arrow { - top: 20px; } - -.protip-skin-square--size-large[data-pt-position="right"] .protip-arrow { - top: 50%; } - -.protip-skin-square--size-large[data-pt-position="right-bottom"] .protip-arrow { - top: auto; - bottom: 20px; - margin-bottom: -12px; } - -.protip-skin-square--size-large[data-pt-position="top-left-corner"] { - border-bottom-right-radius: 0; } - .protip-skin-square--size-large[data-pt-position="top-left-corner"] .protip-arrow { - top: 100%; - left: 100%; - margin: 0 0 0 -12px; - border-width: 0 12px 12px 0; } - -.protip-skin-square--size-large[data-pt-position="top-right-corner"] { - border-bottom-left-radius: 0; } - .protip-skin-square--size-large[data-pt-position="top-right-corner"] .protip-arrow { - top: 100%; - left: -12px; - margin: 0 0 0 12px; - border-width: 12px 12px 0 0; } - -.protip-skin-square--size-large[data-pt-position="bottom-left-corner"] { - border-top-right-radius: 0; } - .protip-skin-square--size-large[data-pt-position="bottom-left-corner"] .protip-arrow { - top: -12px; - left: 100%; - margin: 0 0 0 -12px; - border-width: 0 0 12px 12px; } - -.protip-skin-square--size-large[data-pt-position="bottom-right-corner"] { - border-top-left-radius: 0; } - .protip-skin-square--size-large[data-pt-position="bottom-right-corner"] .protip-arrow { - top: 0; - left: -12px; - margin: -12px 0 0 12px; - border-width: 12px 0 0 12px; } - -.protip-skin-square--scheme-pro.protip-container { - color: #000; - background: #da2e2b; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-pro[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-pro[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-pro[data-pt-position="top-right"] .protip-arrow { - border-top-color: #da2e2b; } - -.protip-skin-square--scheme-pro[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-pro[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-pro[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #da2e2b; } - -.protip-skin-square--scheme-pro[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-pro[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-pro[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #da2e2b; } - -.protip-skin-square--scheme-pro[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-pro[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-pro[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #da2e2b; } - -.protip-skin-square--scheme-pro[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #da2e2b; } - -.protip-skin-square--scheme-pro[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #da2e2b; } - -.protip-skin-square--scheme-pro[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #da2e2b; } - -.protip-skin-square--scheme-pro[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #da2e2b; } - -.protip-skin-square--scheme-blue.protip-container { - color: #fff; - background: #336699; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-blue[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-blue[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-blue[data-pt-position="top-right"] .protip-arrow { - border-top-color: #336699; } - -.protip-skin-square--scheme-blue[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-blue[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-blue[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #336699; } - -.protip-skin-square--scheme-blue[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-blue[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-blue[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #336699; } - -.protip-skin-square--scheme-blue[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-blue[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-blue[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #336699; } - -.protip-skin-square--scheme-blue[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #336699; } - -.protip-skin-square--scheme-blue[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #336699; } - -.protip-skin-square--scheme-blue[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #336699; } - -.protip-skin-square--scheme-blue[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #336699; } - -.protip-skin-square--scheme-red.protip-container { - color: #fff; - background: #802731; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-red[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-red[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-red[data-pt-position="top-right"] .protip-arrow { - border-top-color: #802731; } - -.protip-skin-square--scheme-red[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-red[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-red[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #802731; } - -.protip-skin-square--scheme-red[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-red[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-red[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #802731; } - -.protip-skin-square--scheme-red[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-red[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-red[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #802731; } - -.protip-skin-square--scheme-red[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #802731; } - -.protip-skin-square--scheme-red[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #802731; } - -.protip-skin-square--scheme-red[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #802731; } - -.protip-skin-square--scheme-red[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #802731; } - -.protip-skin-square--scheme-aqua.protip-container { - color: #fff; - background: #339996; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-aqua[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-aqua[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-aqua[data-pt-position="top-right"] .protip-arrow { - border-top-color: #339996; } - -.protip-skin-square--scheme-aqua[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-aqua[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-aqua[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #339996; } - -.protip-skin-square--scheme-aqua[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-aqua[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-aqua[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #339996; } - -.protip-skin-square--scheme-aqua[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-aqua[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-aqua[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #339996; } - -.protip-skin-square--scheme-aqua[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #339996; } - -.protip-skin-square--scheme-aqua[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #339996; } - -.protip-skin-square--scheme-aqua[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #339996; } - -.protip-skin-square--scheme-aqua[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #339996; } - -.protip-skin-square--scheme-dark-transparent.protip-container { - color: #fff; - background: rgba(20, 20, 20, 0.8); - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-dark-transparent[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-dark-transparent[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-dark-transparent[data-pt-position="top-right"] .protip-arrow { - border-top-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-square--scheme-dark-transparent[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-dark-transparent[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-dark-transparent[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-square--scheme-dark-transparent[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-dark-transparent[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-dark-transparent[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-square--scheme-dark-transparent[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-square--scheme-dark-transparent[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: rgba(20, 20, 20, 0.8); } - -.protip-skin-square--scheme-dark.protip-container { - color: #fff; - background: #333; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-dark[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-dark[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-dark[data-pt-position="top-right"] .protip-arrow { - border-top-color: #333; } - -.protip-skin-square--scheme-dark[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-dark[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-dark[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #333; } - -.protip-skin-square--scheme-dark[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-dark[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-dark[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #333; } - -.protip-skin-square--scheme-dark[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-dark[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-dark[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #333; } - -.protip-skin-square--scheme-dark[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #333; } - -.protip-skin-square--scheme-dark[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #333; } - -.protip-skin-square--scheme-dark[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #333; } - -.protip-skin-square--scheme-dark[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #333; } - -.protip-skin-square--scheme-black.protip-container { - color: #fff; - background: #000; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-black[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-black[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-black[data-pt-position="top-right"] .protip-arrow { - border-top-color: #000; } - -.protip-skin-square--scheme-black[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-black[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-black[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #000; } - -.protip-skin-square--scheme-black[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-black[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-black[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #000; } - -.protip-skin-square--scheme-black[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-black[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-black[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #000; } - -.protip-skin-square--scheme-black[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #000; } - -.protip-skin-square--scheme-black[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #000; } - -.protip-skin-square--scheme-black[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #000; } - -.protip-skin-square--scheme-black[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #000; } - -.protip-skin-square--scheme-leaf.protip-container { - color: #fff; - background: #339959; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-leaf[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-leaf[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-leaf[data-pt-position="top-right"] .protip-arrow { - border-top-color: #339959; } - -.protip-skin-square--scheme-leaf[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-leaf[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-leaf[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #339959; } - -.protip-skin-square--scheme-leaf[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-leaf[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-leaf[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #339959; } - -.protip-skin-square--scheme-leaf[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-leaf[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-leaf[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #339959; } - -.protip-skin-square--scheme-leaf[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #339959; } - -.protip-skin-square--scheme-leaf[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #339959; } - -.protip-skin-square--scheme-leaf[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #339959; } - -.protip-skin-square--scheme-leaf[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #339959; } - -.protip-skin-square--scheme-purple.protip-container { - color: #fff; - background: #613399; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-purple[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-purple[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-purple[data-pt-position="top-right"] .protip-arrow { - border-top-color: #613399; } - -.protip-skin-square--scheme-purple[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-purple[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-purple[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #613399; } - -.protip-skin-square--scheme-purple[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-purple[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-purple[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #613399; } - -.protip-skin-square--scheme-purple[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-purple[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-purple[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #613399; } - -.protip-skin-square--scheme-purple[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #613399; } - -.protip-skin-square--scheme-purple[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #613399; } - -.protip-skin-square--scheme-purple[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #613399; } - -.protip-skin-square--scheme-purple[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #613399; } - -.protip-skin-square--scheme-pink.protip-container { - color: #000; - background: #D457AA; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-pink[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-pink[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-pink[data-pt-position="top-right"] .protip-arrow { - border-top-color: #D457AA; } - -.protip-skin-square--scheme-pink[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-pink[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-pink[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #D457AA; } - -.protip-skin-square--scheme-pink[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-pink[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-pink[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #D457AA; } - -.protip-skin-square--scheme-pink[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-pink[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-pink[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #D457AA; } - -.protip-skin-square--scheme-pink[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #D457AA; } - -.protip-skin-square--scheme-pink[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #D457AA; } - -.protip-skin-square--scheme-pink[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #D457AA; } - -.protip-skin-square--scheme-pink[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #D457AA; } - -.protip-skin-square--scheme-orange.protip-container { - color: #000; - background: #E64426; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-orange[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-orange[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-orange[data-pt-position="top-right"] .protip-arrow { - border-top-color: #E64426; } - -.protip-skin-square--scheme-orange[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-orange[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-orange[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #E64426; } - -.protip-skin-square--scheme-orange[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-orange[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-orange[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #E64426; } - -.protip-skin-square--scheme-orange[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-orange[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-orange[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #E64426; } - -.protip-skin-square--scheme-orange[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #E64426; } - -.protip-skin-square--scheme-orange[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #E64426; } - -.protip-skin-square--scheme-orange[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #E64426; } - -.protip-skin-square--scheme-orange[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #E64426; } - -.protip-skin-square--scheme-white.protip-container { - color: #000; - background: #FFF; - font-family: sans-serif; - transition: opacity 0.2s ease-out; } - -.protip-skin-square--scheme-white[data-pt-position="top-left"] .protip-arrow, -.protip-skin-square--scheme-white[data-pt-position="top"] .protip-arrow, -.protip-skin-square--scheme-white[data-pt-position="top-right"] .protip-arrow { - border-top-color: #FFF; } - -.protip-skin-square--scheme-white[data-pt-position="bottom-left"] .protip-arrow, -.protip-skin-square--scheme-white[data-pt-position="bottom"] .protip-arrow, -.protip-skin-square--scheme-white[data-pt-position="bottom-right"] .protip-arrow { - border-bottom-color: #FFF; } - -.protip-skin-square--scheme-white[data-pt-position="left-top"] .protip-arrow, -.protip-skin-square--scheme-white[data-pt-position="left"] .protip-arrow, -.protip-skin-square--scheme-white[data-pt-position="left-bottom"] .protip-arrow { - border-left-color: #FFF; } - -.protip-skin-square--scheme-white[data-pt-position="right-top"] .protip-arrow, -.protip-skin-square--scheme-white[data-pt-position="right"] .protip-arrow, -.protip-skin-square--scheme-white[data-pt-position="right-bottom"] .protip-arrow { - border-right-color: #FFF; } - -.protip-skin-square--scheme-white[data-pt-position="top-left-corner"] .protip-arrow { - border-right-color: #FFF; } - -.protip-skin-square--scheme-white[data-pt-position="top-right-corner"] .protip-arrow { - border-top-color: #FFF; } - -.protip-skin-square--scheme-white[data-pt-position="bottom-left-corner"] .protip-arrow { - border-bottom-color: #FFF; } - -.protip-skin-square--scheme-white[data-pt-position="bottom-right-corner"] .protip-arrow { - border-left-color: #FFF; } +.protip-container.protip-skin-square { + border-radius: 0 !important; } diff --git a/package.json b/package.json index c97920e..46c6873 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "protip", - "version": "1.4.21", + "version": "1.5.0", "description": "A new generation jQuery Tooltip plugin.", "main": "main.js", "scripts": { diff --git a/protip.min.css b/protip.min.css index 983c3e8..5221279 100644 --- a/protip.min.css +++ b/protip.min.css @@ -1 +1 @@ -body .protip-container.protip-mixin--css-no-transition{transition:all 0s}body .protip-container.protip-mixin--css-bold{font-weight:bold}body .protip-container.protip-mixin--css-italic{font-style:italic}body .protip-container.protip-mixin--css-no-style{background:none;color:inherit}body .protip-container.protip-mixin--css-no-style .protip-arrow{display:none}.protip-container{position:absolute;left:0;top:0;z-index:50;line-height:1;opacity:0;pointer-events:none;box-sizing:border-box}.protip-container > i{position:absolute;left:10px}.protip-container > i + div{padding-left:20px}.protip-arrow{content:'';display:block;position:absolute;width:0;height:0;border-style:solid;border-color:transparent}.protip-show{opacity:1;pointer-events:auto}.protip-skin-default--size-tiny{padding:8px;font-size:10px;border-radius:3px}.protip-skin-default--size-tiny[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -4px;border-width:4px 4px 0 4px}.protip-skin-default--size-tiny[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-tiny[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-tiny[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-4px}.protip-skin-default--size-tiny[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="bottom-right"] .protip-arrow{top:-4px;left:auto;margin:0 0 0 -4px;border-width:0 4px 4px 4px}.protip-skin-default--size-tiny[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-tiny[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-tiny[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-4px}.protip-skin-default--size-tiny[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-4px 0 0 0;border-width:4px 0 4px 4px}.protip-skin-default--size-tiny[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-tiny[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-tiny[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-4px}.protip-skin-default--size-tiny[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-4px 0 0 0;border-width:4px 4px 4px 0}.protip-skin-default--size-tiny[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-tiny[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-tiny[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-4px}.protip-skin-default--size-tiny[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-tiny[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -4px;border-width:0 4px 4px 0}.protip-skin-default--size-tiny[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-tiny[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-4px;margin:0 0 0 4px;border-width:4px 4px 0 0}.protip-skin-default--size-tiny[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-tiny[data-pt-position="bottom-left-corner"] .protip-arrow{top:-4px;left:100%;margin:0 0 0 -4px;border-width:0 0 4px 4px}.protip-skin-default--size-tiny[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-tiny[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-4px;margin:-4px 0 0 4px;border-width:4px 0 0 4px}.protip-skin-default--size-small{padding:13px;font-size:12px;border-radius:4px}.protip-skin-default--size-small[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -6px;border-width:6px 6px 0 6px}.protip-skin-default--size-small[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-small[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-small[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-6px}.protip-skin-default--size-small[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="bottom-right"] .protip-arrow{top:-6px;left:auto;margin:0 0 0 -6px;border-width:0 6px 6px 6px}.protip-skin-default--size-small[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-small[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-small[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-6px}.protip-skin-default--size-small[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-6px 0 0 0;border-width:6px 0 6px 6px}.protip-skin-default--size-small[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-small[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-small[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-6px}.protip-skin-default--size-small[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-6px 0 0 0;border-width:6px 6px 6px 0}.protip-skin-default--size-small[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-small[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-small[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-6px}.protip-skin-default--size-small[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-small[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -6px;border-width:0 6px 6px 0}.protip-skin-default--size-small[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-small[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-6px;margin:0 0 0 6px;border-width:6px 6px 0 0}.protip-skin-default--size-small[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-small[data-pt-position="bottom-left-corner"] .protip-arrow{top:-6px;left:100%;margin:0 0 0 -6px;border-width:0 0 6px 6px}.protip-skin-default--size-small[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-small[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-6px;margin:-6px 0 0 6px;border-width:6px 0 0 6px}.protip-skin-default--size-normal{padding:16px;font-size:15px;border-radius:6px}.protip-skin-default--size-normal[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -8px;border-width:8px 8px 0 8px}.protip-skin-default--size-normal[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-normal[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-normal[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-8px}.protip-skin-default--size-normal[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="bottom-right"] .protip-arrow{top:-8px;left:auto;margin:0 0 0 -8px;border-width:0 8px 8px 8px}.protip-skin-default--size-normal[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-normal[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-normal[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-8px}.protip-skin-default--size-normal[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-8px 0 0 0;border-width:8px 0 8px 8px}.protip-skin-default--size-normal[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-normal[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-normal[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-8px}.protip-skin-default--size-normal[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-8px 0 0 0;border-width:8px 8px 8px 0}.protip-skin-default--size-normal[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-normal[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-normal[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-8px}.protip-skin-default--size-normal[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-normal[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -8px;border-width:0 8px 8px 0}.protip-skin-default--size-normal[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-normal[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-8px;margin:0 0 0 8px;border-width:8px 8px 0 0}.protip-skin-default--size-normal[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-normal[data-pt-position="bottom-left-corner"] .protip-arrow{top:-8px;left:100%;margin:0 0 0 -8px;border-width:0 0 8px 8px}.protip-skin-default--size-normal[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-normal[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-8px;margin:-8px 0 0 8px;border-width:8px 0 0 8px}.protip-skin-default--size-big{padding:20px;font-size:18px;border-radius:8px}.protip-skin-default--size-big[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -10px;border-width:10px 10px 0 10px}.protip-skin-default--size-big[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-big[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-big[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-10px}.protip-skin-default--size-big[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="bottom-right"] .protip-arrow{top:-10px;left:auto;margin:0 0 0 -10px;border-width:0 10px 10px 10px}.protip-skin-default--size-big[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-big[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-big[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-10px}.protip-skin-default--size-big[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-10px 0 0 0;border-width:10px 0 10px 10px}.protip-skin-default--size-big[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-big[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-big[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-10px}.protip-skin-default--size-big[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-10px 0 0 0;border-width:10px 10px 10px 0}.protip-skin-default--size-big[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-big[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-big[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-10px}.protip-skin-default--size-big[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-big[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -10px;border-width:0 10px 10px 0}.protip-skin-default--size-big[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-big[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-10px;margin:0 0 0 10px;border-width:10px 10px 0 0}.protip-skin-default--size-big[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-big[data-pt-position="bottom-left-corner"] .protip-arrow{top:-10px;left:100%;margin:0 0 0 -10px;border-width:0 0 10px 10px}.protip-skin-default--size-big[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-big[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-10px;margin:-10px 0 0 10px;border-width:10px 0 0 10px}.protip-skin-default--size-large{padding:20px;font-size:18px;border-radius:8px}.protip-skin-default--size-large[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -12px;border-width:12px 12px 0 12px}.protip-skin-default--size-large[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-large[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-large[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-12px}.protip-skin-default--size-large[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="bottom-right"] .protip-arrow{top:-12px;left:auto;margin:0 0 0 -12px;border-width:0 12px 12px 12px}.protip-skin-default--size-large[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-large[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-large[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-12px}.protip-skin-default--size-large[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-12px 0 0 0;border-width:12px 0 12px 12px}.protip-skin-default--size-large[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-large[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-large[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-12px}.protip-skin-default--size-large[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-12px 0 0 0;border-width:12px 12px 12px 0}.protip-skin-default--size-large[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-large[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-large[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-12px}.protip-skin-default--size-large[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-large[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -12px;border-width:0 12px 12px 0}.protip-skin-default--size-large[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-large[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-12px;margin:0 0 0 12px;border-width:12px 12px 0 0}.protip-skin-default--size-large[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-large[data-pt-position="bottom-left-corner"] .protip-arrow{top:-12px;left:100%;margin:0 0 0 -12px;border-width:0 0 12px 12px}.protip-skin-default--size-large[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-large[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-12px;margin:-12px 0 0 12px;border-width:12px 0 0 12px}.protip-skin-default--scheme-pro.protip-container{color:#000;background:#da2e2b;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-pro[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-pro[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-pro[data-pt-position="top-right"] .protip-arrow{border-top-color:#da2e2b}.protip-skin-default--scheme-pro[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-pro[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-pro[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#da2e2b}.protip-skin-default--scheme-pro[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-pro[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-pro[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#da2e2b}.protip-skin-default--scheme-pro[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-pro[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-pro[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#da2e2b}.protip-skin-default--scheme-pro[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#da2e2b}.protip-skin-default--scheme-pro[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#da2e2b}.protip-skin-default--scheme-pro[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#da2e2b}.protip-skin-default--scheme-pro[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#da2e2b}.protip-skin-default--scheme-blue.protip-container{color:#fff;background:#369;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-blue[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-blue[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-blue[data-pt-position="top-right"] .protip-arrow{border-top-color:#369}.protip-skin-default--scheme-blue[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-blue[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-blue[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#369}.protip-skin-default--scheme-blue[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-blue[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-blue[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#369}.protip-skin-default--scheme-blue[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-blue[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-blue[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#369}.protip-skin-default--scheme-blue[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#369}.protip-skin-default--scheme-blue[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#369}.protip-skin-default--scheme-blue[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#369}.protip-skin-default--scheme-blue[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#369}.protip-skin-default--scheme-red.protip-container{color:#fff;background:#802731;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-red[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-red[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-red[data-pt-position="top-right"] .protip-arrow{border-top-color:#802731}.protip-skin-default--scheme-red[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-red[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-red[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#802731}.protip-skin-default--scheme-red[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-red[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-red[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#802731}.protip-skin-default--scheme-red[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-red[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-red[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#802731}.protip-skin-default--scheme-red[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#802731}.protip-skin-default--scheme-red[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#802731}.protip-skin-default--scheme-red[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#802731}.protip-skin-default--scheme-red[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#802731}.protip-skin-default--scheme-aqua.protip-container{color:#fff;background:#339996;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-aqua[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-aqua[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-aqua[data-pt-position="top-right"] .protip-arrow{border-top-color:#339996}.protip-skin-default--scheme-aqua[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-aqua[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-aqua[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#339996}.protip-skin-default--scheme-aqua[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-aqua[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-aqua[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#339996}.protip-skin-default--scheme-aqua[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-aqua[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-aqua[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#339996}.protip-skin-default--scheme-aqua[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#339996}.protip-skin-default--scheme-aqua[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#339996}.protip-skin-default--scheme-aqua[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#339996}.protip-skin-default--scheme-aqua[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#339996}.protip-skin-default--scheme-dark.protip-container{color:#fff;background:#333;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-dark[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-dark[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-dark[data-pt-position="top-right"] .protip-arrow{border-top-color:#333}.protip-skin-default--scheme-dark[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-dark[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-dark[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#333}.protip-skin-default--scheme-dark[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-dark[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-dark[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#333}.protip-skin-default--scheme-dark[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-dark[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-dark[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#333}.protip-skin-default--scheme-dark[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#333}.protip-skin-default--scheme-dark[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#333}.protip-skin-default--scheme-dark[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#333}.protip-skin-default--scheme-dark[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#333}.protip-skin-default--scheme-dark-transparent.protip-container{color:#fff;background:rgba(20,20,20,0.8);font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-dark-transparent[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-dark-transparent[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-dark-transparent[data-pt-position="top-right"] .protip-arrow{border-top-color:rgba(20,20,20,0.8)}.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:rgba(20,20,20,0.8)}.protip-skin-default--scheme-dark-transparent[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-dark-transparent[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-dark-transparent[data-pt-position="left-bottom"] .protip-arrow{border-left-color:rgba(20,20,20,0.8)}.protip-skin-default--scheme-dark-transparent[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-dark-transparent[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-dark-transparent[data-pt-position="right-bottom"] .protip-arrow{border-right-color:rgba(20,20,20,0.8)}.protip-skin-default--scheme-dark-transparent[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:rgba(20,20,20,0.8)}.protip-skin-default--scheme-dark-transparent[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:rgba(20,20,20,0.8)}.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:rgba(20,20,20,0.8)}.protip-skin-default--scheme-dark-transparent[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:rgba(20,20,20,0.8)}.protip-skin-default--scheme-black.protip-container{color:#fff;background:#000;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-black[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-black[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-black[data-pt-position="top-right"] .protip-arrow{border-top-color:#000}.protip-skin-default--scheme-black[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-black[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-black[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#000}.protip-skin-default--scheme-black[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-black[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-black[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#000}.protip-skin-default--scheme-black[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-black[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-black[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#000}.protip-skin-default--scheme-black[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#000}.protip-skin-default--scheme-black[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#000}.protip-skin-default--scheme-black[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#000}.protip-skin-default--scheme-black[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#000}.protip-skin-default--scheme-leaf.protip-container{color:#fff;background:#339959;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-leaf[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-leaf[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-leaf[data-pt-position="top-right"] .protip-arrow{border-top-color:#339959}.protip-skin-default--scheme-leaf[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-leaf[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-leaf[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#339959}.protip-skin-default--scheme-leaf[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-leaf[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-leaf[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#339959}.protip-skin-default--scheme-leaf[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-leaf[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-leaf[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#339959}.protip-skin-default--scheme-leaf[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#339959}.protip-skin-default--scheme-leaf[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#339959}.protip-skin-default--scheme-leaf[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#339959}.protip-skin-default--scheme-leaf[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#339959}.protip-skin-default--scheme-purple.protip-container{color:#fff;background:#613399;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-purple[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-purple[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-purple[data-pt-position="top-right"] .protip-arrow{border-top-color:#613399}.protip-skin-default--scheme-purple[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-purple[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-purple[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#613399}.protip-skin-default--scheme-purple[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-purple[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-purple[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#613399}.protip-skin-default--scheme-purple[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-purple[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-purple[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#613399}.protip-skin-default--scheme-purple[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#613399}.protip-skin-default--scheme-purple[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#613399}.protip-skin-default--scheme-purple[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#613399}.protip-skin-default--scheme-purple[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#613399}.protip-skin-default--scheme-pink.protip-container{color:#000;background:#D457AA;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-pink[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-pink[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-pink[data-pt-position="top-right"] .protip-arrow{border-top-color:#D457AA}.protip-skin-default--scheme-pink[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-pink[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-pink[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#D457AA}.protip-skin-default--scheme-pink[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-pink[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-pink[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#D457AA}.protip-skin-default--scheme-pink[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-pink[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-pink[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#D457AA}.protip-skin-default--scheme-pink[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#D457AA}.protip-skin-default--scheme-pink[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#D457AA}.protip-skin-default--scheme-pink[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#D457AA}.protip-skin-default--scheme-pink[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#D457AA}.protip-skin-default--scheme-orange.protip-container{color:#000;background:#E64426;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-orange[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-orange[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-orange[data-pt-position="top-right"] .protip-arrow{border-top-color:#E64426}.protip-skin-default--scheme-orange[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-orange[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-orange[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#E64426}.protip-skin-default--scheme-orange[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-orange[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-orange[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#E64426}.protip-skin-default--scheme-orange[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-orange[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-orange[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#E64426}.protip-skin-default--scheme-orange[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#E64426}.protip-skin-default--scheme-orange[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#E64426}.protip-skin-default--scheme-orange[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#E64426}.protip-skin-default--scheme-orange[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#E64426}.protip-skin-default--scheme-white.protip-container{color:#000;background:#FFF;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--scheme-white[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--scheme-white[data-pt-position="top"] .protip-arrow,.protip-skin-default--scheme-white[data-pt-position="top-right"] .protip-arrow{border-top-color:#FFF}.protip-skin-default--scheme-white[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--scheme-white[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--scheme-white[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#FFF}.protip-skin-default--scheme-white[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--scheme-white[data-pt-position="left"] .protip-arrow,.protip-skin-default--scheme-white[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#FFF}.protip-skin-default--scheme-white[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--scheme-white[data-pt-position="right"] .protip-arrow,.protip-skin-default--scheme-white[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#FFF}.protip-skin-default--scheme-white[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#FFF}.protip-skin-default--scheme-white[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#FFF}.protip-skin-default--scheme-white[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#FFF}.protip-skin-default--scheme-white[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#FFF}.protip-skin-square--size-tiny{padding:8px;font-size:10px}.protip-skin-square--size-tiny[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--size-tiny[data-pt-position="top"] .protip-arrow,.protip-skin-square--size-tiny[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -4px;border-width:4px 4px 0 4px}.protip-skin-square--size-tiny[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-square--size-tiny[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-square--size-tiny[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-4px}.protip-skin-square--size-tiny[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--size-tiny[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--size-tiny[data-pt-position="bottom-right"] .protip-arrow{top:-4px;left:auto;margin:0 0 0 -4px;border-width:0 4px 4px 4px}.protip-skin-square--size-tiny[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-square--size-tiny[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-square--size-tiny[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-4px}.protip-skin-square--size-tiny[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--size-tiny[data-pt-position="left"] .protip-arrow,.protip-skin-square--size-tiny[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-4px 0 0 0;border-width:4px 0 4px 4px}.protip-skin-square--size-tiny[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-square--size-tiny[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-square--size-tiny[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-4px}.protip-skin-square--size-tiny[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--size-tiny[data-pt-position="right"] .protip-arrow,.protip-skin-square--size-tiny[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-4px 0 0 0;border-width:4px 4px 4px 0}.protip-skin-square--size-tiny[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-square--size-tiny[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-square--size-tiny[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-4px}.protip-skin-square--size-tiny[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-square--size-tiny[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -4px;border-width:0 4px 4px 0}.protip-skin-square--size-tiny[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-square--size-tiny[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-4px;margin:0 0 0 4px;border-width:4px 4px 0 0}.protip-skin-square--size-tiny[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-square--size-tiny[data-pt-position="bottom-left-corner"] .protip-arrow{top:-4px;left:100%;margin:0 0 0 -4px;border-width:0 0 4px 4px}.protip-skin-square--size-tiny[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-square--size-tiny[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-4px;margin:-4px 0 0 4px;border-width:4px 0 0 4px}.protip-skin-square--size-small{padding:13px;font-size:12px}.protip-skin-square--size-small[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--size-small[data-pt-position="top"] .protip-arrow,.protip-skin-square--size-small[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -6px;border-width:6px 6px 0 6px}.protip-skin-square--size-small[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-square--size-small[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-square--size-small[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-6px}.protip-skin-square--size-small[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--size-small[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--size-small[data-pt-position="bottom-right"] .protip-arrow{top:-6px;left:auto;margin:0 0 0 -6px;border-width:0 6px 6px 6px}.protip-skin-square--size-small[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-square--size-small[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-square--size-small[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-6px}.protip-skin-square--size-small[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--size-small[data-pt-position="left"] .protip-arrow,.protip-skin-square--size-small[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-6px 0 0 0;border-width:6px 0 6px 6px}.protip-skin-square--size-small[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-square--size-small[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-square--size-small[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-6px}.protip-skin-square--size-small[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--size-small[data-pt-position="right"] .protip-arrow,.protip-skin-square--size-small[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-6px 0 0 0;border-width:6px 6px 6px 0}.protip-skin-square--size-small[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-square--size-small[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-square--size-small[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-6px}.protip-skin-square--size-small[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-square--size-small[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -6px;border-width:0 6px 6px 0}.protip-skin-square--size-small[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-square--size-small[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-6px;margin:0 0 0 6px;border-width:6px 6px 0 0}.protip-skin-square--size-small[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-square--size-small[data-pt-position="bottom-left-corner"] .protip-arrow{top:-6px;left:100%;margin:0 0 0 -6px;border-width:0 0 6px 6px}.protip-skin-square--size-small[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-square--size-small[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-6px;margin:-6px 0 0 6px;border-width:6px 0 0 6px}.protip-skin-square--size-normal{padding:16px;font-size:15px}.protip-skin-square--size-normal[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--size-normal[data-pt-position="top"] .protip-arrow,.protip-skin-square--size-normal[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -8px;border-width:8px 8px 0 8px}.protip-skin-square--size-normal[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-square--size-normal[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-square--size-normal[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-8px}.protip-skin-square--size-normal[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--size-normal[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--size-normal[data-pt-position="bottom-right"] .protip-arrow{top:-8px;left:auto;margin:0 0 0 -8px;border-width:0 8px 8px 8px}.protip-skin-square--size-normal[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-square--size-normal[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-square--size-normal[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-8px}.protip-skin-square--size-normal[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--size-normal[data-pt-position="left"] .protip-arrow,.protip-skin-square--size-normal[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-8px 0 0 0;border-width:8px 0 8px 8px}.protip-skin-square--size-normal[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-square--size-normal[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-square--size-normal[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-8px}.protip-skin-square--size-normal[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--size-normal[data-pt-position="right"] .protip-arrow,.protip-skin-square--size-normal[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-8px 0 0 0;border-width:8px 8px 8px 0}.protip-skin-square--size-normal[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-square--size-normal[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-square--size-normal[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-8px}.protip-skin-square--size-normal[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-square--size-normal[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -8px;border-width:0 8px 8px 0}.protip-skin-square--size-normal[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-square--size-normal[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-8px;margin:0 0 0 8px;border-width:8px 8px 0 0}.protip-skin-square--size-normal[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-square--size-normal[data-pt-position="bottom-left-corner"] .protip-arrow{top:-8px;left:100%;margin:0 0 0 -8px;border-width:0 0 8px 8px}.protip-skin-square--size-normal[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-square--size-normal[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-8px;margin:-8px 0 0 8px;border-width:8px 0 0 8px}.protip-skin-square--size-big{padding:20px;font-size:18px}.protip-skin-square--size-big[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--size-big[data-pt-position="top"] .protip-arrow,.protip-skin-square--size-big[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -10px;border-width:10px 10px 0 10px}.protip-skin-square--size-big[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-square--size-big[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-square--size-big[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-10px}.protip-skin-square--size-big[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--size-big[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--size-big[data-pt-position="bottom-right"] .protip-arrow{top:-10px;left:auto;margin:0 0 0 -10px;border-width:0 10px 10px 10px}.protip-skin-square--size-big[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-square--size-big[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-square--size-big[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-10px}.protip-skin-square--size-big[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--size-big[data-pt-position="left"] .protip-arrow,.protip-skin-square--size-big[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-10px 0 0 0;border-width:10px 0 10px 10px}.protip-skin-square--size-big[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-square--size-big[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-square--size-big[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-10px}.protip-skin-square--size-big[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--size-big[data-pt-position="right"] .protip-arrow,.protip-skin-square--size-big[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-10px 0 0 0;border-width:10px 10px 10px 0}.protip-skin-square--size-big[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-square--size-big[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-square--size-big[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-10px}.protip-skin-square--size-big[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-square--size-big[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -10px;border-width:0 10px 10px 0}.protip-skin-square--size-big[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-square--size-big[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-10px;margin:0 0 0 10px;border-width:10px 10px 0 0}.protip-skin-square--size-big[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-square--size-big[data-pt-position="bottom-left-corner"] .protip-arrow{top:-10px;left:100%;margin:0 0 0 -10px;border-width:0 0 10px 10px}.protip-skin-square--size-big[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-square--size-big[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-10px;margin:-10px 0 0 10px;border-width:10px 0 0 10px}.protip-skin-square--size-large{padding:20px;font-size:18px}.protip-skin-square--size-large[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--size-large[data-pt-position="top"] .protip-arrow,.protip-skin-square--size-large[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -12px;border-width:12px 12px 0 12px}.protip-skin-square--size-large[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-square--size-large[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-square--size-large[data-pt-position="top-right"] .protip-arrow{left:auto;right:20px;margin-right:-12px}.protip-skin-square--size-large[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--size-large[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--size-large[data-pt-position="bottom-right"] .protip-arrow{top:-12px;left:auto;margin:0 0 0 -12px;border-width:0 12px 12px 12px}.protip-skin-square--size-large[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-square--size-large[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-square--size-large[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-12px}.protip-skin-square--size-large[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--size-large[data-pt-position="left"] .protip-arrow,.protip-skin-square--size-large[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-12px 0 0 0;border-width:12px 0 12px 12px}.protip-skin-square--size-large[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-square--size-large[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-square--size-large[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-12px}.protip-skin-square--size-large[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--size-large[data-pt-position="right"] .protip-arrow,.protip-skin-square--size-large[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-12px 0 0 0;border-width:12px 12px 12px 0}.protip-skin-square--size-large[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-square--size-large[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-square--size-large[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-12px}.protip-skin-square--size-large[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-square--size-large[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -12px;border-width:0 12px 12px 0}.protip-skin-square--size-large[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-square--size-large[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-12px;margin:0 0 0 12px;border-width:12px 12px 0 0}.protip-skin-square--size-large[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-square--size-large[data-pt-position="bottom-left-corner"] .protip-arrow{top:-12px;left:100%;margin:0 0 0 -12px;border-width:0 0 12px 12px}.protip-skin-square--size-large[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-square--size-large[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-12px;margin:-12px 0 0 12px;border-width:12px 0 0 12px}.protip-skin-square--scheme-pro.protip-container{color:#000;background:#da2e2b;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-pro[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-pro[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-pro[data-pt-position="top-right"] .protip-arrow{border-top-color:#da2e2b}.protip-skin-square--scheme-pro[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-pro[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-pro[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#da2e2b}.protip-skin-square--scheme-pro[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-pro[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-pro[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#da2e2b}.protip-skin-square--scheme-pro[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-pro[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-pro[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#da2e2b}.protip-skin-square--scheme-pro[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#da2e2b}.protip-skin-square--scheme-pro[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#da2e2b}.protip-skin-square--scheme-pro[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#da2e2b}.protip-skin-square--scheme-pro[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#da2e2b}.protip-skin-square--scheme-blue.protip-container{color:#fff;background:#369;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-blue[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-blue[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-blue[data-pt-position="top-right"] .protip-arrow{border-top-color:#369}.protip-skin-square--scheme-blue[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-blue[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-blue[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#369}.protip-skin-square--scheme-blue[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-blue[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-blue[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#369}.protip-skin-square--scheme-blue[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-blue[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-blue[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#369}.protip-skin-square--scheme-blue[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#369}.protip-skin-square--scheme-blue[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#369}.protip-skin-square--scheme-blue[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#369}.protip-skin-square--scheme-blue[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#369}.protip-skin-square--scheme-red.protip-container{color:#fff;background:#802731;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-red[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-red[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-red[data-pt-position="top-right"] .protip-arrow{border-top-color:#802731}.protip-skin-square--scheme-red[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-red[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-red[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#802731}.protip-skin-square--scheme-red[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-red[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-red[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#802731}.protip-skin-square--scheme-red[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-red[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-red[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#802731}.protip-skin-square--scheme-red[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#802731}.protip-skin-square--scheme-red[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#802731}.protip-skin-square--scheme-red[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#802731}.protip-skin-square--scheme-red[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#802731}.protip-skin-square--scheme-aqua.protip-container{color:#fff;background:#339996;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-aqua[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-aqua[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-aqua[data-pt-position="top-right"] .protip-arrow{border-top-color:#339996}.protip-skin-square--scheme-aqua[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-aqua[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-aqua[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#339996}.protip-skin-square--scheme-aqua[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-aqua[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-aqua[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#339996}.protip-skin-square--scheme-aqua[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-aqua[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-aqua[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#339996}.protip-skin-square--scheme-aqua[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#339996}.protip-skin-square--scheme-aqua[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#339996}.protip-skin-square--scheme-aqua[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#339996}.protip-skin-square--scheme-aqua[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#339996}.protip-skin-square--scheme-dark-transparent.protip-container{color:#fff;background:rgba(20,20,20,0.8);font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-dark-transparent[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-dark-transparent[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-dark-transparent[data-pt-position="top-right"] .protip-arrow{border-top-color:rgba(20,20,20,0.8)}.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:rgba(20,20,20,0.8)}.protip-skin-square--scheme-dark-transparent[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-dark-transparent[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-dark-transparent[data-pt-position="left-bottom"] .protip-arrow{border-left-color:rgba(20,20,20,0.8)}.protip-skin-square--scheme-dark-transparent[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-dark-transparent[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-dark-transparent[data-pt-position="right-bottom"] .protip-arrow{border-right-color:rgba(20,20,20,0.8)}.protip-skin-square--scheme-dark-transparent[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:rgba(20,20,20,0.8)}.protip-skin-square--scheme-dark-transparent[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:rgba(20,20,20,0.8)}.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:rgba(20,20,20,0.8)}.protip-skin-square--scheme-dark-transparent[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:rgba(20,20,20,0.8)}.protip-skin-square--scheme-dark.protip-container{color:#fff;background:#333;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-dark[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-dark[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-dark[data-pt-position="top-right"] .protip-arrow{border-top-color:#333}.protip-skin-square--scheme-dark[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-dark[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-dark[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#333}.protip-skin-square--scheme-dark[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-dark[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-dark[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#333}.protip-skin-square--scheme-dark[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-dark[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-dark[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#333}.protip-skin-square--scheme-dark[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#333}.protip-skin-square--scheme-dark[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#333}.protip-skin-square--scheme-dark[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#333}.protip-skin-square--scheme-dark[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#333}.protip-skin-square--scheme-black.protip-container{color:#fff;background:#000;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-black[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-black[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-black[data-pt-position="top-right"] .protip-arrow{border-top-color:#000}.protip-skin-square--scheme-black[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-black[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-black[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#000}.protip-skin-square--scheme-black[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-black[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-black[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#000}.protip-skin-square--scheme-black[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-black[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-black[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#000}.protip-skin-square--scheme-black[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#000}.protip-skin-square--scheme-black[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#000}.protip-skin-square--scheme-black[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#000}.protip-skin-square--scheme-black[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#000}.protip-skin-square--scheme-leaf.protip-container{color:#fff;background:#339959;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-leaf[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-leaf[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-leaf[data-pt-position="top-right"] .protip-arrow{border-top-color:#339959}.protip-skin-square--scheme-leaf[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-leaf[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-leaf[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#339959}.protip-skin-square--scheme-leaf[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-leaf[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-leaf[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#339959}.protip-skin-square--scheme-leaf[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-leaf[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-leaf[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#339959}.protip-skin-square--scheme-leaf[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#339959}.protip-skin-square--scheme-leaf[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#339959}.protip-skin-square--scheme-leaf[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#339959}.protip-skin-square--scheme-leaf[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#339959}.protip-skin-square--scheme-purple.protip-container{color:#fff;background:#613399;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-purple[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-purple[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-purple[data-pt-position="top-right"] .protip-arrow{border-top-color:#613399}.protip-skin-square--scheme-purple[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-purple[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-purple[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#613399}.protip-skin-square--scheme-purple[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-purple[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-purple[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#613399}.protip-skin-square--scheme-purple[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-purple[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-purple[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#613399}.protip-skin-square--scheme-purple[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#613399}.protip-skin-square--scheme-purple[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#613399}.protip-skin-square--scheme-purple[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#613399}.protip-skin-square--scheme-purple[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#613399}.protip-skin-square--scheme-pink.protip-container{color:#000;background:#D457AA;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-pink[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-pink[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-pink[data-pt-position="top-right"] .protip-arrow{border-top-color:#D457AA}.protip-skin-square--scheme-pink[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-pink[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-pink[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#D457AA}.protip-skin-square--scheme-pink[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-pink[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-pink[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#D457AA}.protip-skin-square--scheme-pink[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-pink[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-pink[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#D457AA}.protip-skin-square--scheme-pink[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#D457AA}.protip-skin-square--scheme-pink[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#D457AA}.protip-skin-square--scheme-pink[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#D457AA}.protip-skin-square--scheme-pink[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#D457AA}.protip-skin-square--scheme-orange.protip-container{color:#000;background:#E64426;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-orange[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-orange[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-orange[data-pt-position="top-right"] .protip-arrow{border-top-color:#E64426}.protip-skin-square--scheme-orange[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-orange[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-orange[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#E64426}.protip-skin-square--scheme-orange[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-orange[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-orange[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#E64426}.protip-skin-square--scheme-orange[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-orange[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-orange[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#E64426}.protip-skin-square--scheme-orange[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#E64426}.protip-skin-square--scheme-orange[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#E64426}.protip-skin-square--scheme-orange[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#E64426}.protip-skin-square--scheme-orange[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#E64426}.protip-skin-square--scheme-white.protip-container{color:#000;background:#FFF;font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-square--scheme-white[data-pt-position="top-left"] .protip-arrow,.protip-skin-square--scheme-white[data-pt-position="top"] .protip-arrow,.protip-skin-square--scheme-white[data-pt-position="top-right"] .protip-arrow{border-top-color:#FFF}.protip-skin-square--scheme-white[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-square--scheme-white[data-pt-position="bottom"] .protip-arrow,.protip-skin-square--scheme-white[data-pt-position="bottom-right"] .protip-arrow{border-bottom-color:#FFF}.protip-skin-square--scheme-white[data-pt-position="left-top"] .protip-arrow,.protip-skin-square--scheme-white[data-pt-position="left"] .protip-arrow,.protip-skin-square--scheme-white[data-pt-position="left-bottom"] .protip-arrow{border-left-color:#FFF}.protip-skin-square--scheme-white[data-pt-position="right-top"] .protip-arrow,.protip-skin-square--scheme-white[data-pt-position="right"] .protip-arrow,.protip-skin-square--scheme-white[data-pt-position="right-bottom"] .protip-arrow{border-right-color:#FFF}.protip-skin-square--scheme-white[data-pt-position="top-left-corner"] .protip-arrow{border-right-color:#FFF}.protip-skin-square--scheme-white[data-pt-position="top-right-corner"] .protip-arrow{border-top-color:#FFF}.protip-skin-square--scheme-white[data-pt-position="bottom-left-corner"] .protip-arrow{border-bottom-color:#FFF}.protip-skin-square--scheme-white[data-pt-position="bottom-right-corner"] .protip-arrow{border-left-color:#FFF} \ No newline at end of file +body .protip-container.protip-mixin--css-no-transition{transition:all 0s}body .protip-container.protip-mixin--css-bold{font-weight:bold}body .protip-container.protip-mixin--css-italic{font-style:italic}body .protip-container.protip-mixin--css-no-style{background:none;color:inherit}body .protip-container.protip-mixin--css-no-style .protip-arrow{display:none}.protip-container{position:absolute;left:0;top:0;z-index:50;line-height:1;opacity:0;pointer-events:none;box-sizing:border-box}.protip-container > i{position:absolute;left:10px}.protip-container > i + div{padding-left:20px}.protip-arrow,.protip-arrow-border{content:'';display:block;position:absolute;width:0;height:0;border-style:solid;border-color:transparent}.protip-arrow-border{z-index:-1}.protip-show{opacity:1;pointer-events:auto}.protip-container.protip-skin-default{font-family:sans-serif;transition:opacity 0.2s ease-out}.protip-skin-default--size-tiny{padding:8px;font-size:10px;border-radius:3px}.protip-skin-default--size-tiny[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -4px;border-width:4px 4px 0 4px}.protip-skin-default--size-tiny[data-pt-position="top-left"] .protip-arrow-border,.protip-skin-default--size-tiny[data-pt-position="top"] .protip-arrow-border,.protip-skin-default--size-tiny[data-pt-position="top-right"] .protip-arrow-border{bottom:-1px;left:0;margin:0 0 0 -4px;border-width:4px 4px 0 4px}.protip-skin-default--size-tiny[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-tiny[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-tiny[data-pt-position="top-right"] .protip-arrow{right:20px;margin-right:-4px}.protip-skin-default--size-tiny[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="bottom-right"] .protip-arrow{top:-4px;left:auto;margin:0 0 0 -4px;border-width:0 4px 4px 4px}.protip-skin-default--size-tiny[data-pt-position="bottom-left"] .protip-arrow-border,.protip-skin-default--size-tiny[data-pt-position="bottom"] .protip-arrow-border,.protip-skin-default--size-tiny[data-pt-position="bottom-right"] .protip-arrow-border{top:-1px;left:0;margin:0 0 0 -4px;border-width:0 4px 4px 4px}.protip-skin-default--size-tiny[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-tiny[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-tiny[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-4px}.protip-skin-default--size-tiny[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-4px 0 0 0;border-width:4px 0 4px 4px}.protip-skin-default--size-tiny[data-pt-position="left-top"] .protip-arrow-border,.protip-skin-default--size-tiny[data-pt-position="left"] .protip-arrow-border,.protip-skin-default--size-tiny[data-pt-position="left-bottom"] .protip-arrow-border{top:0;right:-1px;margin:-4px 0 0 0;border-width:4px 0 4px 4px}.protip-skin-default--size-tiny[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-tiny[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-tiny[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-4px}.protip-skin-default--size-tiny[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-tiny[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-4px 0 0 0;border-width:4px 4px 4px 0}.protip-skin-default--size-tiny[data-pt-position="right-top"] .protip-arrow-border,.protip-skin-default--size-tiny[data-pt-position="right"] .protip-arrow-border,.protip-skin-default--size-tiny[data-pt-position="right-bottom"] .protip-arrow-border{top:0;left:-1px;margin:-4px 0 0 0;border-width:4px 4px 4px 0}.protip-skin-default--size-tiny[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-tiny[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-tiny[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-4px}.protip-skin-default--size-tiny[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-tiny[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -4px;border-width:0 4px 4px 0}.protip-skin-default--size-tiny[data-pt-position="top-left-corner"] .protip-arrow-border{bottom:-2px;right:-4px;margin:0 0 0 -6px;border-width:0 6px 6px 0}.protip-skin-default--size-tiny[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-tiny[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-4px;margin:0 0 0 4px;border-width:4px 4px 0 0}.protip-skin-default--size-tiny[data-pt-position="top-right-corner"] .protip-arrow-border{bottom:-2px;right:-4px;margin:0 0 0 6px;border-width:6px 6px 0 0}.protip-skin-default--size-tiny[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-tiny[data-pt-position="bottom-left-corner"] .protip-arrow{top:-4px;left:100%;margin:0 0 0 -4px;border-width:0 0 4px 4px}.protip-skin-default--size-tiny[data-pt-position="bottom-left-corner"] .protip-arrow-border{top:-2px;left:1px;margin:0 0 0 -6px;border-width:0 0 6px 6px}.protip-skin-default--size-tiny[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-tiny[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-4px;margin:-4px 0 0 4px;border-width:4px 0 0 4px}.protip-skin-default--size-tiny[data-pt-position="bottom-right-corner"] .protip-arrow-border{left:-5px;margin:-5px 0 0 5px;border-width:5px 0 0 5px}.protip-skin-default--size-small{padding:13px;font-size:12px;border-radius:4px}.protip-skin-default--size-small[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -6px;border-width:6px 6px 0 6px}.protip-skin-default--size-small[data-pt-position="top-left"] .protip-arrow-border,.protip-skin-default--size-small[data-pt-position="top"] .protip-arrow-border,.protip-skin-default--size-small[data-pt-position="top-right"] .protip-arrow-border{bottom:-1px;left:0;margin:0 0 0 -6px;border-width:6px 6px 0 6px}.protip-skin-default--size-small[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-small[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-small[data-pt-position="top-right"] .protip-arrow{right:20px;margin-right:-6px}.protip-skin-default--size-small[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="bottom-right"] .protip-arrow{top:-6px;left:auto;margin:0 0 0 -6px;border-width:0 6px 6px 6px}.protip-skin-default--size-small[data-pt-position="bottom-left"] .protip-arrow-border,.protip-skin-default--size-small[data-pt-position="bottom"] .protip-arrow-border,.protip-skin-default--size-small[data-pt-position="bottom-right"] .protip-arrow-border{top:-1px;left:0;margin:0 0 0 -6px;border-width:0 6px 6px 6px}.protip-skin-default--size-small[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-small[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-small[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-6px}.protip-skin-default--size-small[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-6px 0 0 0;border-width:6px 0 6px 6px}.protip-skin-default--size-small[data-pt-position="left-top"] .protip-arrow-border,.protip-skin-default--size-small[data-pt-position="left"] .protip-arrow-border,.protip-skin-default--size-small[data-pt-position="left-bottom"] .protip-arrow-border{top:0;right:-1px;margin:-6px 0 0 0;border-width:6px 0 6px 6px}.protip-skin-default--size-small[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-small[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-small[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-6px}.protip-skin-default--size-small[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-small[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-6px 0 0 0;border-width:6px 6px 6px 0}.protip-skin-default--size-small[data-pt-position="right-top"] .protip-arrow-border,.protip-skin-default--size-small[data-pt-position="right"] .protip-arrow-border,.protip-skin-default--size-small[data-pt-position="right-bottom"] .protip-arrow-border{top:0;left:-1px;margin:-6px 0 0 0;border-width:6px 6px 6px 0}.protip-skin-default--size-small[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-small[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-small[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-6px}.protip-skin-default--size-small[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-small[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -6px;border-width:0 6px 6px 0}.protip-skin-default--size-small[data-pt-position="top-left-corner"] .protip-arrow-border{bottom:-2px;right:-6px;margin:0 0 0 -8px;border-width:0 8px 8px 0}.protip-skin-default--size-small[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-small[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-6px;margin:0 0 0 6px;border-width:6px 6px 0 0}.protip-skin-default--size-small[data-pt-position="top-right-corner"] .protip-arrow-border{bottom:-2px;right:-6px;margin:0 0 0 8px;border-width:8px 8px 0 0}.protip-skin-default--size-small[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-small[data-pt-position="bottom-left-corner"] .protip-arrow{top:-6px;left:100%;margin:0 0 0 -6px;border-width:0 0 6px 6px}.protip-skin-default--size-small[data-pt-position="bottom-left-corner"] .protip-arrow-border{top:-2px;left:1px;margin:0 0 0 -8px;border-width:0 0 8px 8px}.protip-skin-default--size-small[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-small[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-6px;margin:-6px 0 0 6px;border-width:6px 0 0 6px}.protip-skin-default--size-small[data-pt-position="bottom-right-corner"] .protip-arrow-border{left:-7px;margin:-7px 0 0 7px;border-width:7px 0 0 7px}.protip-skin-default--size-normal{padding:16px;font-size:15px;border-radius:6px}.protip-skin-default--size-normal[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -8px;border-width:8px 8px 0 8px}.protip-skin-default--size-normal[data-pt-position="top-left"] .protip-arrow-border,.protip-skin-default--size-normal[data-pt-position="top"] .protip-arrow-border,.protip-skin-default--size-normal[data-pt-position="top-right"] .protip-arrow-border{bottom:-1px;left:0;margin:0 0 0 -8px;border-width:8px 8px 0 8px}.protip-skin-default--size-normal[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-normal[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-normal[data-pt-position="top-right"] .protip-arrow{right:20px;margin-right:-8px}.protip-skin-default--size-normal[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="bottom-right"] .protip-arrow{top:-8px;left:auto;margin:0 0 0 -8px;border-width:0 8px 8px 8px}.protip-skin-default--size-normal[data-pt-position="bottom-left"] .protip-arrow-border,.protip-skin-default--size-normal[data-pt-position="bottom"] .protip-arrow-border,.protip-skin-default--size-normal[data-pt-position="bottom-right"] .protip-arrow-border{top:-1px;left:0;margin:0 0 0 -8px;border-width:0 8px 8px 8px}.protip-skin-default--size-normal[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-normal[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-normal[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-8px}.protip-skin-default--size-normal[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-8px 0 0 0;border-width:8px 0 8px 8px}.protip-skin-default--size-normal[data-pt-position="left-top"] .protip-arrow-border,.protip-skin-default--size-normal[data-pt-position="left"] .protip-arrow-border,.protip-skin-default--size-normal[data-pt-position="left-bottom"] .protip-arrow-border{top:0;right:-1px;margin:-8px 0 0 0;border-width:8px 0 8px 8px}.protip-skin-default--size-normal[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-normal[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-normal[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-8px}.protip-skin-default--size-normal[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-normal[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-8px 0 0 0;border-width:8px 8px 8px 0}.protip-skin-default--size-normal[data-pt-position="right-top"] .protip-arrow-border,.protip-skin-default--size-normal[data-pt-position="right"] .protip-arrow-border,.protip-skin-default--size-normal[data-pt-position="right-bottom"] .protip-arrow-border{top:0;left:-1px;margin:-8px 0 0 0;border-width:8px 8px 8px 0}.protip-skin-default--size-normal[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-normal[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-normal[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-8px}.protip-skin-default--size-normal[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-normal[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -8px;border-width:0 8px 8px 0}.protip-skin-default--size-normal[data-pt-position="top-left-corner"] .protip-arrow-border{bottom:-2px;right:-8px;margin:0 0 0 -10px;border-width:0 10px 10px 0}.protip-skin-default--size-normal[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-normal[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-8px;margin:0 0 0 8px;border-width:8px 8px 0 0}.protip-skin-default--size-normal[data-pt-position="top-right-corner"] .protip-arrow-border{bottom:-2px;right:-8px;margin:0 0 0 10px;border-width:10px 10px 0 0}.protip-skin-default--size-normal[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-normal[data-pt-position="bottom-left-corner"] .protip-arrow{top:-8px;left:100%;margin:0 0 0 -8px;border-width:0 0 8px 8px}.protip-skin-default--size-normal[data-pt-position="bottom-left-corner"] .protip-arrow-border{top:-2px;left:1px;margin:0 0 0 -10px;border-width:0 0 10px 10px}.protip-skin-default--size-normal[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-normal[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-8px;margin:-8px 0 0 8px;border-width:8px 0 0 8px}.protip-skin-default--size-normal[data-pt-position="bottom-right-corner"] .protip-arrow-border{left:-9px;margin:-9px 0 0 9px;border-width:9px 0 0 9px}.protip-skin-default--size-big{padding:20px;font-size:18px;border-radius:8px}.protip-skin-default--size-big[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -10px;border-width:10px 10px 0 10px}.protip-skin-default--size-big[data-pt-position="top-left"] .protip-arrow-border,.protip-skin-default--size-big[data-pt-position="top"] .protip-arrow-border,.protip-skin-default--size-big[data-pt-position="top-right"] .protip-arrow-border{bottom:-1px;left:0;margin:0 0 0 -10px;border-width:10px 10px 0 10px}.protip-skin-default--size-big[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-big[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-big[data-pt-position="top-right"] .protip-arrow{right:20px;margin-right:-10px}.protip-skin-default--size-big[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="bottom-right"] .protip-arrow{top:-10px;left:auto;margin:0 0 0 -10px;border-width:0 10px 10px 10px}.protip-skin-default--size-big[data-pt-position="bottom-left"] .protip-arrow-border,.protip-skin-default--size-big[data-pt-position="bottom"] .protip-arrow-border,.protip-skin-default--size-big[data-pt-position="bottom-right"] .protip-arrow-border{top:-1px;left:0;margin:0 0 0 -10px;border-width:0 10px 10px 10px}.protip-skin-default--size-big[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-big[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-big[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-10px}.protip-skin-default--size-big[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-10px 0 0 0;border-width:10px 0 10px 10px}.protip-skin-default--size-big[data-pt-position="left-top"] .protip-arrow-border,.protip-skin-default--size-big[data-pt-position="left"] .protip-arrow-border,.protip-skin-default--size-big[data-pt-position="left-bottom"] .protip-arrow-border{top:0;right:-1px;margin:-10px 0 0 0;border-width:10px 0 10px 10px}.protip-skin-default--size-big[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-big[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-big[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-10px}.protip-skin-default--size-big[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-big[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-10px 0 0 0;border-width:10px 10px 10px 0}.protip-skin-default--size-big[data-pt-position="right-top"] .protip-arrow-border,.protip-skin-default--size-big[data-pt-position="right"] .protip-arrow-border,.protip-skin-default--size-big[data-pt-position="right-bottom"] .protip-arrow-border{top:0;left:-1px;margin:-10px 0 0 0;border-width:10px 10px 10px 0}.protip-skin-default--size-big[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-big[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-big[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-10px}.protip-skin-default--size-big[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-big[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -10px;border-width:0 10px 10px 0}.protip-skin-default--size-big[data-pt-position="top-left-corner"] .protip-arrow-border{bottom:-2px;right:-10px;margin:0 0 0 -12px;border-width:0 12px 12px 0}.protip-skin-default--size-big[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-big[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-10px;margin:0 0 0 10px;border-width:10px 10px 0 0}.protip-skin-default--size-big[data-pt-position="top-right-corner"] .protip-arrow-border{bottom:-2px;right:-10px;margin:0 0 0 12px;border-width:12px 12px 0 0}.protip-skin-default--size-big[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-big[data-pt-position="bottom-left-corner"] .protip-arrow{top:-10px;left:100%;margin:0 0 0 -10px;border-width:0 0 10px 10px}.protip-skin-default--size-big[data-pt-position="bottom-left-corner"] .protip-arrow-border{top:-2px;left:1px;margin:0 0 0 -12px;border-width:0 0 12px 12px}.protip-skin-default--size-big[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-big[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-10px;margin:-10px 0 0 10px;border-width:10px 0 0 10px}.protip-skin-default--size-big[data-pt-position="bottom-right-corner"] .protip-arrow-border{left:-11px;margin:-11px 0 0 11px;border-width:11px 0 0 11px}.protip-skin-default--size-large{padding:20px;font-size:18px;border-radius:8px}.protip-skin-default--size-large[data-pt-position="top-left"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="top"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="top-right"] .protip-arrow{top:100%;left:auto;margin:0 0 0 -12px;border-width:12px 12px 0 12px}.protip-skin-default--size-large[data-pt-position="top-left"] .protip-arrow-border,.protip-skin-default--size-large[data-pt-position="top"] .protip-arrow-border,.protip-skin-default--size-large[data-pt-position="top-right"] .protip-arrow-border{bottom:-1px;left:0;margin:0 0 0 -12px;border-width:12px 12px 0 12px}.protip-skin-default--size-large[data-pt-position="top-left"] .protip-arrow{left:20px}.protip-skin-default--size-large[data-pt-position="top"] .protip-arrow{left:50%}.protip-skin-default--size-large[data-pt-position="top-right"] .protip-arrow{right:20px;margin-right:-12px}.protip-skin-default--size-large[data-pt-position="bottom-left"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="bottom"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="bottom-right"] .protip-arrow{top:-12px;left:auto;margin:0 0 0 -12px;border-width:0 12px 12px 12px}.protip-skin-default--size-large[data-pt-position="bottom-left"] .protip-arrow-border,.protip-skin-default--size-large[data-pt-position="bottom"] .protip-arrow-border,.protip-skin-default--size-large[data-pt-position="bottom-right"] .protip-arrow-border{top:-1px;left:0;margin:0 0 0 -12px;border-width:0 12px 12px 12px}.protip-skin-default--size-large[data-pt-position="bottom-left"] .protip-arrow{left:20px}.protip-skin-default--size-large[data-pt-position="bottom"] .protip-arrow{left:50%}.protip-skin-default--size-large[data-pt-position="bottom-right"] .protip-arrow{left:auto;right:20px;margin-right:-12px}.protip-skin-default--size-large[data-pt-position="left-top"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="left"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="left-bottom"] .protip-arrow{top:auto;left:100%;margin:-12px 0 0 0;border-width:12px 0 12px 12px}.protip-skin-default--size-large[data-pt-position="left-top"] .protip-arrow-border,.protip-skin-default--size-large[data-pt-position="left"] .protip-arrow-border,.protip-skin-default--size-large[data-pt-position="left-bottom"] .protip-arrow-border{top:0;right:-1px;margin:-12px 0 0 0;border-width:12px 0 12px 12px}.protip-skin-default--size-large[data-pt-position="left-top"] .protip-arrow{top:20px}.protip-skin-default--size-large[data-pt-position="left"] .protip-arrow{top:50%}.protip-skin-default--size-large[data-pt-position="left-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-12px}.protip-skin-default--size-large[data-pt-position="right-top"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="right"] .protip-arrow,.protip-skin-default--size-large[data-pt-position="right-bottom"] .protip-arrow{top:auto;right:100%;margin:-12px 0 0 0;border-width:12px 12px 12px 0}.protip-skin-default--size-large[data-pt-position="right-top"] .protip-arrow-border,.protip-skin-default--size-large[data-pt-position="right"] .protip-arrow-border,.protip-skin-default--size-large[data-pt-position="right-bottom"] .protip-arrow-border{top:0;left:-1px;margin:-12px 0 0 0;border-width:12px 12px 12px 0}.protip-skin-default--size-large[data-pt-position="right-top"] .protip-arrow{top:20px}.protip-skin-default--size-large[data-pt-position="right"] .protip-arrow{top:50%}.protip-skin-default--size-large[data-pt-position="right-bottom"] .protip-arrow{top:auto;bottom:20px;margin-bottom:-12px}.protip-skin-default--size-large[data-pt-position="top-left-corner"]{border-bottom-right-radius:0}.protip-skin-default--size-large[data-pt-position="top-left-corner"] .protip-arrow{top:100%;left:100%;margin:0 0 0 -12px;border-width:0 12px 12px 0}.protip-skin-default--size-large[data-pt-position="top-left-corner"] .protip-arrow-border{bottom:-2px;right:-12px;margin:0 0 0 -14px;border-width:0 14px 14px 0}.protip-skin-default--size-large[data-pt-position="top-right-corner"]{border-bottom-left-radius:0}.protip-skin-default--size-large[data-pt-position="top-right-corner"] .protip-arrow{top:100%;left:-12px;margin:0 0 0 12px;border-width:12px 12px 0 0}.protip-skin-default--size-large[data-pt-position="top-right-corner"] .protip-arrow-border{bottom:-2px;right:-12px;margin:0 0 0 14px;border-width:14px 14px 0 0}.protip-skin-default--size-large[data-pt-position="bottom-left-corner"]{border-top-right-radius:0}.protip-skin-default--size-large[data-pt-position="bottom-left-corner"] .protip-arrow{top:-12px;left:100%;margin:0 0 0 -12px;border-width:0 0 12px 12px}.protip-skin-default--size-large[data-pt-position="bottom-left-corner"] .protip-arrow-border{top:-2px;left:1px;margin:0 0 0 -14px;border-width:0 0 14px 14px}.protip-skin-default--size-large[data-pt-position="bottom-right-corner"]{border-top-left-radius:0}.protip-skin-default--size-large[data-pt-position="bottom-right-corner"] .protip-arrow{top:0;left:-12px;margin:-12px 0 0 12px;border-width:12px 0 0 12px}.protip-skin-default--size-large[data-pt-position="bottom-right-corner"] .protip-arrow-border{left:-13px;margin:-13px 0 0 13px;border-width:13px 0 0 13px}.protip-container.protip-skin-square{border-radius:0!important} \ No newline at end of file diff --git a/protip.min.js b/protip.min.js index b5bfe38..0dce1fa 100644 --- a/protip.min.js +++ b/protip.min.js @@ -1,2 +1,2 @@ -!function(){function t(e,i,s){function o(h,r){if(!i[h]){if(!e[h]){var a="function"==typeof require&&require;if(!r&&a)return a(h,!0);if(n)return n(h,!0);var _=new Error("Cannot find module '"+h+"'");throw _.code="MODULE_NOT_FOUND",_}var f=i[h]={exports:{}};e[h][0].call(f.exports,function(t){var i=e[h][1][t];return o(i||t)},f,f.exports,t,e,i,s)}return i[h].exports}for(var n="function"==typeof require&&require,h=0;h{arrow}{icon}
{content}
',TEMPLATE_ICON:'',ATTR_WIDTH:"width",ATTR_MAX_WIDTH:"max-width",SKIN_DEFAULT:"default",SIZE_DEFAULT:"normal",SCHEME_DEFAULT:"pro",PSEUDO_NEXT:"next",PSEUDO_PREV:"prev",PSEUDO_THIS:"this"};return t.TEMPLATE_ARROW='',t})},{}],5:[function(t,e,i){(function(s){!function(o,n){"use strict";"function"==typeof define&&define.amd?define(["jquery","./Constants"],n):"object"==typeof i?e.exports=n("undefined"!=typeof window?window.jQuery:"undefined"!=typeof s?s.jQuery:null,t("./Constants")):o.ProtipGravityParser=n(o.jQuery,o.ProtipConstants)}(this,function(t,e){"use strict";var i=function(t,e){return this._Construct(t,e)};return t.extend(!0,i.prototype,{_Construct:function(t,i){return this._positionsList=[{lvl:1,key:i,top:0,left:0},{lvl:3,key:e.POSITION_CORNER_LEFT_TOP,top:0,left:0},{lvl:2,key:e.POSITION_TOP_LEFT,top:0,left:0},{lvl:1,key:e.POSITION_TOP,top:0,left:0},{lvl:2,key:e.POSITION_TOP_RIGHT,top:0,left:0},{lvl:3,key:e.POSITION_CORNER_RIGHT_TOP,top:0,left:0},{lvl:2,key:e.POSITION_RIGHT_TOP,top:0,left:0},{lvl:1,key:e.POSITION_RIGHT,top:0,left:0},{lvl:2,key:e.POSITION_RIGHT_BOTTOM,top:0,left:0},{lvl:2,key:e.POSITION_BOTTOM_LEFT,top:0,left:0},{lvl:1,key:e.POSITION_BOTTOM,top:0,left:0},{lvl:2,key:e.POSITION_BOTTOM_RIGHT,top:0,left:0},{lvl:3,key:e.POSITION_CORNER_RIGHT_BOTTOM,top:0,left:0},{lvl:2,key:e.POSITION_LEFT_TOP,top:0,left:0},{lvl:1,key:e.POSITION_LEFT,top:0,left:0},{lvl:2,key:e.POSITION_LEFT_BOTTOM,top:0,left:0},{lvl:3,key:e.POSITION_CORNER_LEFT_BOTTOM,top:0,left:0}],this._input=t,this._finals=[],this._parse(),this._finals},_parse:function(){if(this._input===!0||3===this._input)this._finals=this._positionsList;else if(isNaN(this._input)){var t=[],e=!1;this._finals=this._input.split(";").map(function(i){if(i=i.trim(),"..."===i)e=!0;else if(i){var s=i.split(" ").map(function(t){return t.trim()});return t.push(s[0]),{lvl:1,key:s[0],left:parseInt(s[1],10)||0,top:parseInt(s[2],10)||0}}}).filter(function(t){return!!t}),e&&this._positionsList.forEach(function(e){-1===t.indexOf(e.key)&&this._finals.push(e)}.bind(this))}else this._finals=this._positionsList.filter(function(t){return t.lvl<=this._input}.bind(this))}}),i})}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Constants":4}],6:[function(t,e,i){(function(s){!function(o,n){"use strict";"function"==typeof define&&define.amd?define(["jquery","./Constants","./GravityParser","./PositionCalculator"],n):"object"==typeof i?e.exports=n("undefined"!=typeof window?window.jQuery:"undefined"!=typeof s?s.jQuery:null,t("./Constants"),t("./GravityParser"),t("./PositionCalculator")):o.ProtipGravityTester=n(o.jQuery,o.ProtipConstants,o.ProtipGravityParser,o.ProtipPositionCalculator)}(this,function(t,e,i,s){"use strict";var o=function(t){return this._Construct(t)};return t.extend(!0,o.prototype,{_Construct:function(t){this._item=t,this._result=void 0,this._setWindowDimensions(),this._positionList=new i(this._item.data.gravity,this._item.data.position);var e;for(e=0;e0},_rightOk:function(){return this._dimensions.offset.left+this._dimensions.width0},_setProtipMinWidth:function(){if(this._item.classInstance.settings.forceMinWidth){this._item.el.protip.css({position:"fixed",left:0,top:0,minWidth:0});var t=this._item.el.protip.outerWidth()+1;this._item.el.protip.css({position:"",left:"",top:"",minWidth:t+"px"})}},_setProtipDimensions:function(){this._dimensions={width:this._item.el.protip.outerWidth()||0,height:this._item.el.protip.outerHeight()||0,offset:this._item.el.protip.offset()}},_setWindowDimensions:function(){var t=window,e=document,i=e.documentElement,s=e.getElementsByTagName("body")[0],o=t.innerWidth||i.clientWidth||s.clientWidth,n=t.innerHeight||i.clientHeight||s.clientHeight;this._windowDimensions={width:parseInt(o),height:parseInt(n),scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.getElementsByTagName("body")[0].scrollTop||0}}}),o})}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Constants":4,"./GravityParser":5,"./PositionCalculator":9}],7:[function(t,e,i){(function(s){!function(o,n){"use strict";"function"==typeof define&&define.amd?define(["jquery","./Constants","./GravityTester","./PositionCalculator"],n):"object"==typeof i?e.exports=n("undefined"!=typeof window?window.jQuery:"undefined"!=typeof s?s.jQuery:null,t("./Constants"),t("./GravityTester"),t("./PositionCalculator")):o.ProtipItemClass=n(o.jQuery,o.ProtipConstants,o.ProtipGravityTester,o.ProtipPositionCalculator)}(this,function(t,e,i,s){"use strict";function o(t,e){return t.replace(/\{([\w\.]*)}/g,function(t,i){for(var s=i.split("."),o=e[s.shift()],n=0,h=s.length;h>n;n++)o=o[s[n]];return"undefined"!=typeof o&&null!==o?o:""})}var n=function(t,e,i,s){return this._Construct(t,e,i,s)};return t.extend(!0,n.prototype,{_Construct:function(t,i,s,o){return this._override=o||{},this._override.identifier=t,this.el={},this.el.source=i,this.data={},this.classInstance=s,this._isVisible=!1,this._task={delayIn:void 0,delayOut:void 0},this._fetchData(),this._prepareInternals(),this._appendProtip(),this._initSticky(),this._initAutoShow(),this._bind(),this.el.source.addClass(this.classInstance.settings.selector.replace(".","")).data(this._namespaced(e.PROP_INITED),!0),setTimeout(function(){this.el.source.trigger(e.EVENT_PROTIP_READY,this)}.bind(this),10),this},actionHandler:function(t){if(this.data.trigger===e.TRIGGER_STICKY);else if(t!==e.EVENT_CLICK||this.data.trigger!==e.TRIGGER_CLICK&&this.data.trigger!==e.TRIGGER_CLICK2){if(this.data.trigger!==e.TRIGGER_CLICK&&this.data.trigger!==e.TRIGGER_CLICK2)switch(t){case e.EVENT_MOUSEOUT:this.hide();break;case e.EVENT_MOUSEOVER:this.show()}}else this.toggle()},destroy:function(){this.hide(!0),this._unbind(),this.el.protip.remove(),this.el.source.data(this._namespaced(e.PROP_INITED),!1).data(this._namespaced(e.PROP_IDENTIFIER),!1).removeData(),this.classInstance.onItemDestroyed(this.data.identifier),t.each(this._task,function(t,e){clearTimeout(e)})},isVisible:function(){return this._isVisible},toggle:function(){this._isVisible?this.hide():this.show()},show:function(t,o){if(this.data.title){if(this._task.delayOut&&clearTimeout(this._task.delayOut),this._task.delayIn&&clearTimeout(this._task.delayIn),this._task.autoHide&&clearTimeout(this._task.autoHide),!t&&this.data.delayIn)return void(this._task.delayIn=setTimeout(function(){this.show(!0)}.bind(this),this.data.delayIn));this.data.autoHide!==!1&&(this._task.autoHide=setTimeout(function(){this.hide(!0)}.bind(this),this.data.autoHide));var n;this.data.gravity?(n=new i(this),delete n.position):n=new s(this),this.el.source.addClass(e.SELECTOR_OPEN),!o&&this.el.source.trigger(e.EVENT_PROTIP_SHOW,this),this.el.protip.css(n).addClass(e.SELECTOR_SHOW),this.data.animate&&this.el.protip.addClass(e.SELECTOR_ANIMATE).addClass(this.data.animate||this.classInstance.settings.animate),this._isVisible=!0}},applyPosition:function(t){this.el.protip.attr("data-"+e.DEFAULT_NAMESPACE+"-"+e.PROP_POSITION,t)},hide:function(t,i){return this._task.delayOut&&clearTimeout(this._task.delayOut),this._task.delayIn&&clearTimeout(this._task.delayIn),this._task.autoHide&&clearTimeout(this._task.autoHide),!t&&this.data.delayOut?void(this._task.delayOut=setTimeout(function(){this.hide(!0)}.bind(this),this.data.delayOut)):(this.el.source.removeClass(e.SELECTOR_OPEN),!i&&this.el.source.trigger(e.EVENT_PROTIP_HIDE,this),this.el.protip.removeClass(e.SELECTOR_SHOW).removeClass(e.SELECTOR_ANIMATE).removeClass(this.data.animate),void(this._isVisible=!1))},getArrowOffset:function(){return{width:this.el.protipArrow.outerWidth()||0,height:this.el.protipArrow.outerHeight()||0}},_fetchData:function(){t.each(this.classInstance.settings.defaults,t.proxy(function(t){this.data[t]=this.el.source.data(this._namespaced(t))},this)),this.data=t.extend({},this.classInstance.settings.defaults,this.data),this.data=t.extend({},this.data,this._override),t.each(this.data,t.proxy(function(t,e){this.el.source.data(this._namespaced(t),e)},this))},_prepareInternals:function(){this._setTarget(),this._detectTitle(),this._checkInteractive()},_checkInteractive:function(){this.data.interactive&&(this.data.delayOut=this.data.delayOut||e.DEFAULT_DELAY_OUT)},_initSticky:function(){this.data.trigger===e.TRIGGER_STICKY&&this.show()},_initAutoShow:function(){this.data.autoShow&&this.show()},_appendProtip:function(){this.el.protip=o(this.classInstance.settings.protipTemplate,{classes:this._getClassList(),widthType:this._getWidthType(),width:this._getWidth(),content:this.data.title,icon:this._getIconTemplate(),arrow:this.data.arrow?e.TEMPLATE_ARROW:"",identifier:this.data.identifier}),this.el.protip=t(this.el.protip),this.el.protipArrow=this.el.protip.find("."+e.SELECTOR_PREFIX+e.SELECTOR_ARROW),this.el.target.append(this.el.protip)},_getClassList:function(){var t=[],i=this.data.skin,s=this.data.size,o=this.data.scheme;return t.push(e.SELECTOR_PREFIX+e.SELECTOR_CONTAINER),t.push(e.SELECTOR_SKIN_PREFIX+i),t.push(e.SELECTOR_SKIN_PREFIX+i+e.SELECTOR_SIZE_PREFIX+s),t.push(e.SELECTOR_SKIN_PREFIX+i+e.SELECTOR_SCHEME_PREFIX+o),this.data.classes&&t.push(this.data.classes),this.data.mixin&&t.push(this._parseMixins()),t.join(" ")},_parseMixins:function(){var t=[];return this.data.mixin&&this.data.mixin.split(" ").forEach(function(i){i&&t.push(e.SELECTOR_MIXIN_PREFIX+i)},this),t.join(" ")},_getWidthType:function(){return isNaN(this.data.width)?e.ATTR_WIDTH:e.ATTR_MAX_WIDTH},_getWidth:function(){return parseInt(this.data.width,10)},_getIconTemplate:function(){return this.data.icon?o(this.classInstance.settings.iconTemplate,{icon:this.data.icon}):""},_detectTitle:function(){if(!this.data.title||"#"!==this.data.title.charAt(0)&&"."!==this.data.title.charAt(0)){if(this.data.title&&":"===this.data.title.charAt(0)){var i=this.data.title.substring(1);switch(i){case e.PSEUDO_NEXT:this.data.title=this.el.source.next().html();break;case e.PSEUDO_PREV:this.data.title=this.el.source.prev().html();break;case e.PSEUDO_THIS:this.data.title=this.el.source.html()}}}else this.data.titleSource=this.data.titleSource||this.data.title,this.data.title=t(this.data.title).html();this.data.title&&this.data.title.indexOf("{arrow}{icon}
{content}
',TEMPLATE_ICON:'',ATTR_WIDTH:"width",ATTR_MAX_WIDTH:"max-width",SKIN_DEFAULT:"default",SIZE_DEFAULT:"normal",SCHEME_DEFAULT:"pro",PSEUDO_NEXT:"next",PSEUDO_PREV:"prev",PSEUDO_THIS:"this"};return t.TEMPLATE_ARROW='',t})},{}],5:[function(t,e,i){(function(s){!function(o,n){"use strict";"function"==typeof define&&define.amd?define(["jquery","./Constants"],n):"object"==typeof i?e.exports=n("undefined"!=typeof window?window.jQuery:"undefined"!=typeof s?s.jQuery:null,t("./Constants")):o.ProtipGravityParser=n(o.jQuery,o.ProtipConstants)}(this,function(t,e){"use strict";var i=function(t,e){return this._Construct(t,e)};return t.extend(!0,i.prototype,{_Construct:function(t,i){return this._positionsList=[{lvl:1,key:i,top:0,left:0},{lvl:3,key:e.POSITION_CORNER_LEFT_TOP,top:0,left:0},{lvl:2,key:e.POSITION_TOP_LEFT,top:0,left:0},{lvl:1,key:e.POSITION_TOP,top:0,left:0},{lvl:2,key:e.POSITION_TOP_RIGHT,top:0,left:0},{lvl:3,key:e.POSITION_CORNER_RIGHT_TOP,top:0,left:0},{lvl:2,key:e.POSITION_RIGHT_TOP,top:0,left:0},{lvl:1,key:e.POSITION_RIGHT,top:0,left:0},{lvl:2,key:e.POSITION_RIGHT_BOTTOM,top:0,left:0},{lvl:2,key:e.POSITION_BOTTOM_LEFT,top:0,left:0},{lvl:1,key:e.POSITION_BOTTOM,top:0,left:0},{lvl:2,key:e.POSITION_BOTTOM_RIGHT,top:0,left:0},{lvl:3,key:e.POSITION_CORNER_RIGHT_BOTTOM,top:0,left:0},{lvl:2,key:e.POSITION_LEFT_TOP,top:0,left:0},{lvl:1,key:e.POSITION_LEFT,top:0,left:0},{lvl:2,key:e.POSITION_LEFT_BOTTOM,top:0,left:0},{lvl:3,key:e.POSITION_CORNER_LEFT_BOTTOM,top:0,left:0}],this._input=t,this._finals=[],this._parse(),this._finals},_parse:function(){if(this._input===!0||3===this._input)this._finals=this._positionsList;else if(isNaN(this._input)){var t=[],e=!1;this._finals=this._input.split(";").map(function(i){if(i=i.trim(),"..."===i)e=!0;else if(i){var s=i.split(" ").map(function(t){return t.trim()});return t.push(s[0]),{lvl:1,key:s[0],left:parseInt(s[1],10)||0,top:parseInt(s[2],10)||0}}}).filter(function(t){return!!t}),e&&this._positionsList.forEach(function(e){-1===t.indexOf(e.key)&&this._finals.push(e)}.bind(this))}else this._finals=this._positionsList.filter(function(t){return t.lvl<=this._input}.bind(this))}}),i})}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Constants":4}],6:[function(t,e,i){(function(s){!function(o,n){"use strict";"function"==typeof define&&define.amd?define(["jquery","./Constants","./GravityParser","./PositionCalculator"],n):"object"==typeof i?e.exports=n("undefined"!=typeof window?window.jQuery:"undefined"!=typeof s?s.jQuery:null,t("./Constants"),t("./GravityParser"),t("./PositionCalculator")):o.ProtipGravityTester=n(o.jQuery,o.ProtipConstants,o.ProtipGravityParser,o.ProtipPositionCalculator)}(this,function(t,e,i,s){"use strict";var o=function(t){return this._Construct(t)};return t.extend(!0,o.prototype,{_Construct:function(t){this._item=t,this._result=void 0,this._setWindowDimensions(),this._positionList=new i(this._item.data.gravity,this._item.data.position);var e;for(e=0;e0},_rightOk:function(){return this._dimensions.offset.left+this._dimensions.width0},_setProtipMinWidth:function(){if(this._item.classInstance.settings.forceMinWidth){this._item.el.protip.css({position:"fixed",left:0,top:0,minWidth:0});var t=this._item.el.protip.outerWidth()+1;this._item.el.protip.css({position:"",left:"",top:"",minWidth:t+"px"})}},_setProtipDimensions:function(){this._dimensions={width:this._item.el.protip.outerWidth()||0,height:this._item.el.protip.outerHeight()||0,offset:this._item.el.protip.offset()}},_setWindowDimensions:function(){var t=window,e=document,i=e.documentElement,s=e.getElementsByTagName("body")[0],o=t.innerWidth||i.clientWidth||s.clientWidth,n=t.innerHeight||i.clientHeight||s.clientHeight;this._windowDimensions={width:parseInt(o),height:parseInt(n),scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.getElementsByTagName("body")[0].scrollTop||0}}}),o})}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Constants":4,"./GravityParser":5,"./PositionCalculator":9}],7:[function(t,e,i){(function(s){!function(o,n){"use strict";"function"==typeof define&&define.amd?define(["jquery","./Constants","./GravityTester","./PositionCalculator"],n):"object"==typeof i?e.exports=n("undefined"!=typeof window?window.jQuery:"undefined"!=typeof s?s.jQuery:null,t("./Constants"),t("./GravityTester"),t("./PositionCalculator")):o.ProtipItemClass=n(o.jQuery,o.ProtipConstants,o.ProtipGravityTester,o.ProtipPositionCalculator)}(this,function(t,e,i,s){"use strict";function o(t,e){return t.replace(/\{([\w\.]*)}/g,function(t,i){for(var s=i.split("."),o=e[s.shift()],n=0,r=s.length;r>n;n++)o=o[s[n]];return"undefined"!=typeof o&&null!==o?o:""})}var n=function(t,e,i,s){return this._Construct(t,e,i,s)};return t.extend(!0,n.prototype,{_Construct:function(t,i,s,o){return this._override=o||{},this._override.identifier=t,this.el={},this.el.source=i,this.data={},this.classInstance=s,this._isVisible=!1,this._task={delayIn:void 0,delayOut:void 0},this._fetchData(),this._prepareInternals(),this._appendProtip(),this._initSticky(),this._initAutoShow(),this._bind(),this.el.source.addClass(this.classInstance.settings.selector.replace(".","")).data(this._namespaced(e.PROP_INITED),!0),setTimeout(function(){this.el.source.trigger(e.EVENT_PROTIP_READY,this)}.bind(this),10),this},actionHandler:function(t){if(this.data.trigger===e.TRIGGER_STICKY);else if(t!==e.EVENT_CLICK||this.data.trigger!==e.TRIGGER_CLICK&&this.data.trigger!==e.TRIGGER_CLICK2){if(this.data.trigger!==e.TRIGGER_CLICK&&this.data.trigger!==e.TRIGGER_CLICK2)switch(t){case e.EVENT_MOUSEOUT:this.hide();break;case e.EVENT_MOUSEOVER:this.show()}}else this.toggle()},update:function(){this.data.title=this.data.originalTitle,this._detectTitle(),this.el.protip.find(e.SELECTOR_CONTENT).html(this.data.title)},destroy:function(){this.hide(!0),this._unbind(),this.el.protip.remove(),this.el.source.data(this._namespaced(e.PROP_INITED),!1).data(this._namespaced(e.PROP_IDENTIFIER),!1),this.classInstance.onItemDestroyed(this.data.identifier),t.each(this._task,function(t,e){clearTimeout(e)})},isVisible:function(){return this._isVisible},toggle:function(){this._isVisible?this.hide():this.show()},applyColors:function(t){var i={};switch(this.data.skin in e.SKINS&&this.data.scheme in e.SKINS[this.data.skin]&&(i=e.SKINS[this.data.skin][this.data.scheme]),this.data.background&&(i.background=this.data.background),this.data.border&&(i.border=this.data.border),this.el.protipArrow.add(this.el.protipArrowBorder).css({"border-top-color":"","border-bottom-color":"","border-left-color":"","border-right-color":""}),this.data.position){case e.POSITION_TOP:case e.POSITION_TOP_LEFT:case e.POSITION_TOP_RIGHT:case e.POSITION_CORNER_RIGHT_TOP:this.el.protipArrow.css({"border-top-color":i.background}),this.el.protipArrowBorder.css({"border-top-color":i.border});break;case e.POSITION_RIGHT:case e.POSITION_RIGHT_TOP:case e.POSITION_RIGHT_BOTTOM:case e.POSITION_CORNER_RIGHT_BOTTOM:this.el.protipArrow.css({"border-right-color":i.background}),this.el.protipArrowBorder.css({"border-right-color":i.border});break;case e.POSITION_BOTTOM:case e.POSITION_BOTTOM_LEFT:case e.POSITION_BOTTOM_RIGHT:case e.POSITION_CORNER_LEFT_BOTTOM:this.el.protipArrow.css({"border-bottom-color":i.background}),this.el.protipArrowBorder.css({"border-bottom-color":i.border});break;case e.POSITION_LEFT:case e.POSITION_LEFT_TOP:case e.POSITION_LEFT_BOTTOM:case e.POSITION_CORNER_LEFT_TOP:this.el.protipArrow.css({"border-left-color":i.background}),this.el.protipArrowBorder.css({"border-left-color":i.border})}return t.background=i.background,t.color=i.color,t.border="",i.border&&(t.border="1px solid"+i.border),t},show:function(t,o){if(this.data.title){if(this._task.delayOut&&clearTimeout(this._task.delayOut),this._task.delayIn&&clearTimeout(this._task.delayIn),this._task.autoHide&&clearTimeout(this._task.autoHide),!t&&this.data.delayIn)return void(this._task.delayIn=setTimeout(function(){this.show(!0)}.bind(this),this.data.delayIn));this.data.autoHide!==!1&&(this._task.autoHide=setTimeout(function(){this.hide(!0)}.bind(this),this.data.autoHide));var n;this.data.gravity?(n=new i(this),this.data.position=n.position,delete n.position):n=new s(this),this.applyColors(n),this.el.source.addClass(e.SELECTOR_OPEN),!o&&this.el.source.trigger(e.EVENT_PROTIP_SHOW,this),this.el.protip.css(n).addClass(e.SELECTOR_SHOW),this.data.animate&&this.el.protip.addClass(e.SELECTOR_ANIMATE).addClass(this.data.animate||this.classInstance.settings.animate),this._isVisible=!0}},applyPosition:function(t){this.el.protip.attr("data-"+e.DEFAULT_NAMESPACE+"-"+e.PROP_POSITION,t)},hide:function(t,i){return this._task.delayOut&&clearTimeout(this._task.delayOut),this._task.delayIn&&clearTimeout(this._task.delayIn),this._task.autoHide&&clearTimeout(this._task.autoHide),!t&&this.data.delayOut?void(this._task.delayOut=setTimeout(function(){this.hide(!0)}.bind(this),this.data.delayOut)):(this.el.source.removeClass(e.SELECTOR_OPEN),!i&&this.el.source.trigger(e.EVENT_PROTIP_HIDE,this),this.el.protip.removeClass(e.SELECTOR_SHOW).removeClass(e.SELECTOR_ANIMATE).removeClass(this.data.animate),void(this._isVisible=!1))},getArrowOffset:function(){return{width:this.el.protipArrow.outerWidth()||0,height:this.el.protipArrow.outerHeight()||0}},_fetchData:function(){t.each(this.classInstance.settings.defaults,t.proxy(function(t){this.data[t]=this.el.source.data(this._namespaced(t))},this)),this.data=t.extend({},this.classInstance.settings.defaults,this.data),this.data=t.extend({},this.data,this._override),t.each(this.data,t.proxy(function(t,e){this.el.source.data(this._namespaced(t),e)},this))},_prepareInternals:function(){this._setTarget(),this._detectTitle(),this._checkInteractive()},_checkInteractive:function(){this.data.interactive&&(this.data.delayOut=this.data.delayOut||e.DEFAULT_DELAY_OUT)},_initSticky:function(){this.data.trigger===e.TRIGGER_STICKY&&this.show()},_initAutoShow:function(){this.data.autoShow&&this.show()},_appendProtip:function(){this.el.protip=o(this.classInstance.settings.protipTemplate,{classes:this._getClassList(),widthType:this._getWidthType(),width:this._getWidth(),content:this.data.title,icon:this._getIconTemplate(),arrow:this.data.arrow?e.TEMPLATE_ARROW:"",identifier:this.data.identifier}),this.el.protip=t(this.el.protip),this.el.protipArrow=this.el.protip.find("."+e.SELECTOR_PREFIX+e.SELECTOR_ARROW),this.el.protipArrowBorder=this.el.protip.find("."+e.SELECTOR_PREFIX+e.SELECTOR_ARROW_BORDER),this.el.target.append(this.el.protip)},_getClassList:function(){var t=[],i=this.data.skin,s=this.data.size,o=this.data.scheme;return"square"===i&&(t.push(e.SELECTOR_SKIN_PREFIX+i),i="default"),t.push(e.SELECTOR_PREFIX+e.SELECTOR_CONTAINER),t.push(e.SELECTOR_SKIN_PREFIX+i),t.push(e.SELECTOR_SKIN_PREFIX+i+e.SELECTOR_SIZE_PREFIX+s),t.push(e.SELECTOR_SKIN_PREFIX+i+e.SELECTOR_SCHEME_PREFIX+o),this.data.classes&&t.push(this.data.classes),this.data.mixin&&t.push(this._parseMixins()),t.join(" ")},_parseMixins:function(){var t=[];return this.data.mixin&&this.data.mixin.split(" ").forEach(function(i){i&&t.push(e.SELECTOR_MIXIN_PREFIX+i)},this),t.join(" ")},_getWidthType:function(){return isNaN(this.data.width)?e.ATTR_WIDTH:e.ATTR_MAX_WIDTH},_getWidth:function(){return parseInt(this.data.width,10)},_getIconTemplate:function(){return this.data.icon?o(this.classInstance.settings.iconTemplate,{icon:this.data.icon}):""},_detectTitle:function(){if(!this.data.title||"#"!==this.data.title.charAt(0)&&"."!==this.data.title.charAt(0)){if(this.data.title&&":"===this.data.title.charAt(0)){var i=this.data.title.substring(1);switch(i){case e.PSEUDO_NEXT:this.data.title=this.el.source.next().html();break;case e.PSEUDO_PREV:this.data.title=this.el.source.prev().html();break;case e.PSEUDO_THIS:this.data.title=this.el.source.html()}}}else this.data.titleSource=this.data.titleSource||this.data.title,this.data.title=t(this.data.title).html();this.data.title&&this.data.title.indexOf(" Mocha tests - + From fbdf2e69c405bd123a3e33113588fa200acb6e7f Mon Sep 17 00:00:00 2001 From: Tofandel Date: Wed, 20 Mar 2019 15:26:42 +0100 Subject: [PATCH 7/8] Fix wrong corner values in doc and tests --- README.md | 8 ++--- bundle.js | 34 +++++++++----------- bundle.test.js | 54 +++++++++++++++----------------- css/protip.css | 65 +++++++++++++++++++++------------------ css/skin/_default.scss | 13 ++++---- protip.min.css | 2 +- protip.min.js | 4 +-- src/GravityTester.js | 1 + src/Item.js | 11 ++++--- src/PositionCalculator.js | 10 +++--- test/noDebug.html | 22 ++++++------- test/testcontent.html | 20 ++++++------ 12 files changed, 124 insertions(+), 120 deletions(-) diff --git a/README.md b/README.md index be7014e..a2f7810 100644 --- a/README.md +++ b/README.md @@ -216,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 d9d5254..32d51eb 100644 --- a/bundle.js +++ b/bundle.js @@ -1024,6 +1024,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(); @@ -1284,16 +1285,8 @@ require('./src/Plugin'); } }, - /*** - * Update the content of a protip instance (In case the title is a selector to an HTML element and the element was modified) - */ - update: function () { - this.data.title = this.data.originalTitle; - this._detectTitle(); - this.el.protip.find(C.SELECTOR_CONTENT).html(this.data.title); - }, /** - * Destroys the current intance. + * Destroys the current instance. * Reset data, hide, unbind, remove. */ destroy: function(){ @@ -1359,7 +1352,7 @@ require('./src/Plugin'); case C.POSITION_RIGHT: case C.POSITION_RIGHT_TOP: case C.POSITION_RIGHT_BOTTOM: - case C.POSITION_CORNER_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; @@ -1373,7 +1366,7 @@ require('./src/Plugin'); case C.POSITION_LEFT: case C.POSITION_LEFT_TOP: case C.POSITION_LEFT_BOTTOM: - case C.POSITION_CORNER_LEFT_TOP: + 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; @@ -1424,20 +1417,21 @@ require('./src/Plugin'); }.bind(this), this.data.autoHide); } - //this.update(); - var style; // Handle gravity/non-gravity based position calculations if (this.data.gravity) { style = new GravityTester(this); - this.data.position = style.position; - 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 @@ -2227,14 +2221,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; @@ -2269,14 +2263,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; @@ -2333,6 +2327,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 179f6a4..e1d7a55 100644 --- a/bundle.test.js +++ b/bundle.test.js @@ -16498,6 +16498,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(); @@ -16758,16 +16759,8 @@ function hasOwnProperty(obj, prop) { } }, - /*** - * Update the content of a protip instance (In case the title is a selector to an HTML element and the element was modified) - */ - update: function () { - this.data.title = this.data.originalTitle; - this._detectTitle(); - this.el.protip.find(C.SELECTOR_CONTENT).html(this.data.title); - }, /** - * Destroys the current intance. + * Destroys the current instance. * Reset data, hide, unbind, remove. */ destroy: function(){ @@ -16833,7 +16826,7 @@ function hasOwnProperty(obj, prop) { case C.POSITION_RIGHT: case C.POSITION_RIGHT_TOP: case C.POSITION_RIGHT_BOTTOM: - case C.POSITION_CORNER_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; @@ -16847,7 +16840,7 @@ function hasOwnProperty(obj, prop) { case C.POSITION_LEFT: case C.POSITION_LEFT_TOP: case C.POSITION_LEFT_BOTTOM: - case C.POSITION_CORNER_LEFT_TOP: + 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; @@ -16898,20 +16891,21 @@ function hasOwnProperty(obj, prop) { }.bind(this), this.data.autoHide); } - //this.update(); - var style; // Handle gravity/non-gravity based position calculations if (this.data.gravity) { style = new GravityTester(this); - this.data.position = style.position; - 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 @@ -17701,14 +17695,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; @@ -17743,14 +17737,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; @@ -17807,6 +17801,8 @@ function hasOwnProperty(obj, prop) { position.left = position.left + 'px'; position.top = position.top + 'px'; + position.position = this._position; + return position; } }); @@ -18191,8 +18187,8 @@ module.exports = '