diff --git a/demo/index.html b/demo/index.html
index 687a583..efe2d36 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -131,6 +131,17 @@ Themes
light
+
+
+
+
+
+
+
Dismiss only on click close button
+
+ close button
+
+
Themes
$('#theme-dark').darkTooltip();
$('#theme-light').darkTooltip({
theme:'light'
+ });
+
+ $('#dismiss-close-button').darkTooltip({
+ trigger:'click',
+ animation:'flipIn',
+ gravity:'west',
+ theme:'light',
+ showCloseButton: true,
+ hideOnClickOutside: false,
});
});
diff --git a/dist/darktooltip.css b/dist/darktooltip.css
index 12cf71a..c1c60f9 100644
--- a/dist/darktooltip.css
+++ b/dist/darktooltip.css
@@ -1,129 +1,366 @@
-.dark-tooltip{ display:none; position:absolute; z-index:99; text-decoration:none; font-weight:normal; height:auto; top:0; left:0;}
+.dark-tooltip {
+ display: none;
+ position: absolute;
+ z-index: 99;
+ text-decoration: none;
+ font-weight: normal;
+ height: auto;
+ top: 0;
+ left: 0;
+}
+
+.dark-tooltip.small {
+ padding: 4px;
+ font-size: 12px;
+ max-width: 150px;
+ border-radius: 2px;
+}
+
+.dark-tooltip.medium {
+ padding: 10px;
+ font-size: 14px;
+ max-width: 200px;
+ border-radius: 4px;
+}
+
+.dark-tooltip.large {
+ padding: 16px;
+ font-size: 16px;
+ max-width: 250px;
+ border-radius: 6px;
+}
+
+.dark-tooltip .tip {
+ transform: scale(1.01);
+ -webkit-transform: scale(1.01);
+ transform: scale(1.01);
+ content: "";
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ line-height: 0px;
+}
+
+.dark-tooltip.south .tip {
+ left: 50%;
+ top: 100%;
+}
+
+.dark-tooltip.west .tip {
+ left: 0;
+ top: 50%;
+}
+
+.dark-tooltip.north .tip {
+ left: 50%;
+ top: 0;
+}
+
+.dark-tooltip.east .tip {
+ left: 100%;
+ top: 50%;
+}
+
+.dark-tooltip.south.small .tip {
+ border-width: 7px 5px 0 5px;
+ margin-left: -5px;
+}
-.dark-tooltip.small{ padding:4px; font-size:12px; max-width:150px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
-.dark-tooltip.medium{ padding:10px; font-size:14px; max-width:200px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
-.dark-tooltip.large{ padding:16px; font-size:16px; max-width:250px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
+.dark-tooltip.south.medium .tip {
+ border-width: 8px 6px 0 6px;
+ margin-left: -6px;
+}
-/* Tips */
-.dark-tooltip .tip{ transform: scale(1.01); -webkit-transform: scale(1.01); transform: scale(1.01); content: ""; position: absolute; width:0; height:0; border-style: solid; line-height: 0px; }
+.dark-tooltip.south.large .tip {
+ border-width: 14px 12px 0 12px;
+ margin-left: -12px;
+}
-.dark-tooltip.south .tip{ left:50%; top:100%;}
-.dark-tooltip.west .tip{ left:0; top:50%;}
-.dark-tooltip.north .tip{ left:50%; top:0; }
-.dark-tooltip.east .tip{ left:100%; top:50%;}
+.dark-tooltip.west.small .tip {
+ border-width: 5px 7px 5px 0;
+ margin-left: -7px;
+ margin-top: -5px;
+}
+
+.dark-tooltip.west.medium .tip {
+ border-width: 6px 8px 6px 0;
+ margin-left: -8px;
+ margin-top: -6px;
+}
-.dark-tooltip.south.small .tip{ border-width: 7px 5px 0 5px; margin-left:-5px;}
-.dark-tooltip.south.medium .tip{ border-width: 8px 6px 0 6px; margin-left:-6px;}
-.dark-tooltip.south.large .tip{ border-width: 14px 12px 0 12px; margin-left:-12px;}
+.dark-tooltip.west.large .tip {
+ border-width: 12px 14px 12px 0;
+ margin-left: -14px;
+ margin-top: -12px;
+}
-.dark-tooltip.west.small .tip{ border-width: 5px 7px 5px 0; margin-left:-7px; margin-top:-5px;}
-.dark-tooltip.west.medium .tip{ border-width: 6px 8px 6px 0; margin-left:-8px; margin-top:-6px;}
-.dark-tooltip.west.large .tip{ border-width: 12px 14px 12px 0; margin-left:-14px; margin-top:-12px;}
+.dark-tooltip.north.small .tip {
+ border-width: 0 5px 7px 5px;
+ margin-left: -5px;
+ margin-top: -7px;
+}
-.dark-tooltip.north.small .tip{ border-width: 0 5px 7px 5px; margin-left:-5px; margin-top:-7px;}
-.dark-tooltip.north.medium .tip{ border-width: 0 6px 8px 6px; margin-left:-6px; margin-top:-8px;}
-.dark-tooltip.north.large .tip{ border-width: 0 12px 14px 12px; margin-left:-12px; margin-top:-14px;}
+.dark-tooltip.north.medium .tip {
+ border-width: 0 6px 8px 6px;
+ margin-left: -6px;
+ margin-top: -8px;
+}
-.dark-tooltip.east.small .tip{ border-width: 5px 0 5px 7px; margin-top:-5px;}
-.dark-tooltip.east.medium .tip{ border-width: 6px 0 6px 8px; margin-top:-6px;}
-.dark-tooltip.east.large .tip{ border-width: 12px 0 12px 14px; margin-top:-12px;}
+.dark-tooltip.north.large .tip {
+ border-width: 0 12px 14px 12px;
+ margin-left: -12px;
+ margin-top: -14px;
+}
+
+.dark-tooltip.east.small .tip {
+ border-width: 5px 0 5px 7px;
+ margin-top: -5px;
+}
+
+.dark-tooltip.east.medium .tip {
+ border-width: 6px 0 6px 8px;
+ margin-top: -6px;
+}
+
+.dark-tooltip.east.large .tip {
+ border-width: 12px 0 12px 14px;
+ margin-top: -12px;
+}
/* confirm */
-.dark-tooltip ul.confirm{ list-style-type:none;margin-top:5px;display:inline-block;margin:0 auto; }
-.dark-tooltip ul.confirm li{ padding:10px;float:left;margin:5px;min-width:25px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;}
+.dark-tooltip ul.confirm {
+ list-style-type: none;
+ margin-top: 5px;
+ display: inline-block;
+ margin: 0 auto;
+}
+
+.dark-tooltip ul.confirm li {
+ padding: 10px;
+ float: left;
+ margin: 5px;
+ min-width: 25px;
+ border-radius: 3px;
+}
+
+.dark-tooltip .darktooltip-close-button span {
+ position: absolute;
+ top: 0;
+ right: 1px;
+ padding: 0;
+ cursor: pointer;
+ color: lightgray;
+ font-weight: 700;
+ font-size: 17px;
+}
/* themes */
-.dark-tooltip.dark{ background-color:#1B1E24; color:#fff; }
-.dark-tooltip.light{ background-color:#ebedf3; color:#1B1E24; }
+.dark-tooltip.dark {
+ background-color: #1B1E24;
+ color: #fff;
+}
+
+.dark-tooltip.light {
+ background-color: #ebedf3;
+ color: #1B1E24;
+}
+
+.dark-tooltip.dark.south .tip {
+ border-color: #1B1E24 transparent transparent transparent;
+ _border-color: #1B1E24 #000000 #000000 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.dark.west .tip {
+ border-color: transparent #1B1E24 transparent transparent;
+ _border-color: #000000 #1B1E24 #000000 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.dark.north .tip {
+ border-color: transparent transparent #1B1E24 transparent;
+ _border-color: #000000 #000000 #1B1E24 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.dark.east .tip {
+ border-color: transparent transparent transparent #1B1E24;
+ _border-color: #000000 #000000 #000000 #1B1E24;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.light.south .tip {
+ border-color: #ebedf3 transparent transparent transparent;
+ _border-color: #ebedf3 #000000 #000000 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.light.west .tip {
+ border-color: transparent #ebedf3 transparent transparent;
+ _border-color: #000000 #ebedf3 #000000 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.light.north .tip {
+ border-color: transparent transparent #ebedf3 transparent;
+ _border-color: #000000 #000000 #ebedf3 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.light.east .tip {
+ border-color: transparent transparent transparent #ebedf3;
+ _border-color: #000000 #000000 #000000 #ebedf3;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
-.dark-tooltip.dark.south .tip{ border-color: #1B1E24 transparent transparent transparent; _border-color: #1B1E24 #000000 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); }
-.dark-tooltip.dark.west .tip{ border-color: transparent #1B1E24 transparent transparent; _border-color: #000000 #1B1E24 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); }
-.dark-tooltip.dark.north .tip{ border-color: transparent transparent #1B1E24 transparent; _border-color: #000000 #000000 #1B1E24 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); }
-.dark-tooltip.dark.east .tip{ border-color: transparent transparent transparent #1B1E24; _border-color: #000000 #000000 #000000 #1B1E24; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); }
+.dark-tooltip.dark ul.confirm li {
+ background-color: #416E85;
+}
-.dark-tooltip.light.south .tip{ border-color: #ebedf3 transparent transparent transparent; _border-color: #ebedf3 #000000 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); }
-.dark-tooltip.light.west .tip{ border-color: transparent #ebedf3 transparent transparent; _border-color: #000000 #ebedf3 #000000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); }
-.dark-tooltip.light.north .tip{ border-color: transparent transparent #ebedf3 transparent; _border-color: #000000 #000000 #ebedf3 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); }
-.dark-tooltip.light.east .tip{ border-color: transparent transparent transparent #ebedf3; _border-color:#000000 #000000 #000000 #ebedf3 ; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); }
+.dark-tooltip.dark ul.confirm li:hover {
+ background-color: #417E85;
+}
-.dark-tooltip.dark ul.confirm li{ background-color:#416E85;}
-.dark-tooltip.dark ul.confirm li:hover{ background-color:#417E85;}
+.dark-tooltip.light ul.confirm li {
+ background-color: #C1DBDB;
+}
-.dark-tooltip.light ul.confirm li{ background-color:#C1DBDB;}
-.dark-tooltip.light ul.confirm li:hover{ background-color:#DCE8E8;}
+.dark-tooltip.light ul.confirm li:hover {
+ background-color: #DCE8E8;
+}
/* Animations */
-.animated{
- -webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;
- -webkit-animation-duration:.5s;-moz-animation-duration:.5s;-ms-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;
+.animated {
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: .5s;
+ animation-duration: .5s;
}
+
@-webkit-keyframes flipInUp {
- 0% { -webkit-transform: perspective(400px) rotateX(-90deg); opacity: 0;}
- 40% { -webkit-transform: perspective(400px) rotateX(5deg);}
- 70% { -webkit-transform: perspective(400px) rotateX(-5deg);}
- 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;}
-}
-@-moz-keyframes flipInUp {
- 0% {transform: perspective(400px) rotateX(-90deg);opacity: 0;}
- 40% {transform: perspective(400px) rotateX(5deg);}
- 70% {transform: perspective(400px) rotateX(-5deg);}
- 100% {transform: perspective(400px) rotateX(0deg);opacity: 1;}
-}
-@-o-keyframes flipInUp {
- 0% {-o-transform: perspective(400px) rotateX(-90deg);opacity: 0;}
- 40% {-o-transform: perspective(400px) rotateX(5deg);}
- 70% {-o-transform: perspective(400px) rotateX(-5deg);}
- 100% {-o-transform: perspective(400px) rotateX(0deg);opacity: 1;}
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(-90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateX(5deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateX(-5deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
}
+
@keyframes flipInUp {
- 0% {transform: perspective(400px) rotateX(-90deg);opacity: 0;}
- 40% {transform: perspective(400px) rotateX(5deg);}
- 70% {transform: perspective(400px) rotateX(-5deg);}
- 100% {transform: perspective(400px) rotateX(0deg);opacity: 1;}
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(-90deg);
+ transform: perspective(400px) rotateX(-90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateX(5deg);
+ transform: perspective(400px) rotateX(5deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateX(-5deg);
+ transform: perspective(400px) rotateX(-5deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
}
+
@-webkit-keyframes flipInRight {
- 0% { -webkit-transform: perspective(400px) rotateY(-90deg); opacity: 0;}
- 40% { -webkit-transform: perspective(400px) rotateY(5deg);}
- 70% { -webkit-transform: perspective(400px) rotateY(-5deg);}
- 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1;}
-}
-@-moz-keyframes flipInRight {
- 0% {transform: perspective(400px) rotateY(-90deg);opacity: 0;}
- 40% {transform: perspective(400px) rotateY(5deg);}
- 70% {transform: perspective(400px) rotateY(-5deg);}
- 100% {transform: perspective(400px) rotateY(0deg);opacity: 1;}
-}
-@-o-keyframes flipInRight {
- 0% {-o-transform: perspective(400px) rotateY(-90deg);opacity: 0;}
- 40% {-o-transform: perspective(400px) rotateY(5deg);}
- 70% {-o-transform: perspective(400px) rotateY(-5deg);}
- 100% {-o-transform: perspective(400px) rotateY(0deg);opacity: 1;}
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(-90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(5deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateY(-5deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
}
+
@keyframes flipInRight {
- 0% {transform: perspective(400px) rotateY(-90deg);opacity: 0;}
- 40% {transform: perspective(400px) rotateY(5deg);}
- 70% {transform: perspective(400px) rotateY(-5deg);}
- 100% {transform: perspective(400px) rotateY(0deg);opacity: 1;}
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(-90deg);
+ transform: perspective(400px) rotateY(-90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(5deg);
+ transform: perspective(400px) rotateY(5deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateY(-5deg);
+ transform: perspective(400px) rotateY(-5deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
}
-.flipIn { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important}
-.flipIn.south, .flipIn.north { -webkit-animation-name: flipInUp; -moz-animation-name: flipInUp; -o-animation-name: flipInUp; animation-name: flipInUp; }
-.flipIn.west, .flipIn.east { -webkit-animation-name: flipInRight; -moz-animation-name: flipInRight; -o-animation-name: flipInRight; animation-name: flipInRight; }
-@-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;}}
-@-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;}}
-@-o-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
-@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
+.flipIn {
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+}
-.fadeIn{-webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn;}
+.flipIn.south, .flipIn.north {
+ -webkit-animation-name: flipInUp;
+ animation-name: flipInUp;
+}
+
+.flipIn.west, .flipIn.east {
+ -webkit-animation-name: flipInRight;
+ animation-name: flipInRight;
+}
+
+@-webkit-keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
/* Modal */
-.darktooltip-modal-layer{
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-image: url('./modal-bg.png');
- opacity: .7;
- display: none;
+.darktooltip-modal-layer {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image: url("../img/modal-bg.png");
+ opacity: .7;
+ display: none;
}
+/*# sourceMappingURL=darktooltip.css.map */
\ No newline at end of file
diff --git a/dist/darktooltip.sass b/dist/darktooltip.sass
index d2ed7a7..5e4c3fa 100644
--- a/dist/darktooltip.sass
+++ b/dist/darktooltip.sass
@@ -154,6 +154,17 @@
border-radius: 3px
+.dark-tooltip .darktooltip-close-button span
+ position: absolute;
+ top: 0;
+ right: 1px;
+ padding: 0;
+ cursor: pointer;
+ color: lightgray;
+ font-weight: 700;
+ font-size: 17px
+
+
/* themes */
.dark-tooltip.dark
background-color: #1B1E24
@@ -426,7 +437,7 @@
@-webkit-keyframes fadeIn
0%
- opacity: 0
+ opacity: 0
100%
diff --git a/dist/jquery.darktooltip.js b/dist/jquery.darktooltip.js
index eba1b0a..30a1a44 100644
--- a/dist/jquery.darktooltip.js
+++ b/dist/jquery.darktooltip.js
@@ -118,6 +118,12 @@
if(this.options.confirm){
this.addConfirm();
}
+ if (this.options.showCloseButton) {
+ this.addCloseButton();
+ }
+ if(this.options.customClass){
+ this.addCustomClass();
+ }
},
setPositions: function(){
@@ -175,9 +181,17 @@
dt.toggle();
e.stopPropagation();
});
- $('html').click(function(){
- dt.hide();
- })
+ if (this.options.hideOnClickOutside) {
+ $('html').click(function () {
+ dt.hide();
+ });
+ }
+ }
+
+ if (this.options.trackOnResize){
+ $(window).resize( function (){
+ dt.setPositions();
+ });
}
},
@@ -194,6 +208,15 @@
this.setConfirmEvents();
},
+ addCloseButton: function () {
+ this.tooltip.append("x");
+ this.setCloseEvent();
+ },
+
+ addCustomClass: function(){
+ this.tooltip.addClass(this.options.customClass);
+ },
+
setConfirmEvents: function(){
var dt = this;
this.tooltip.find('li.darktooltip-yes').click( function(e){
@@ -206,6 +229,14 @@
});
},
+ setCloseEvent: function () {
+ var dt = this;
+ this.tooltip.find('.darktooltip-close-button').click(function (e) {
+ dt.hide();
+ e.stopPropagation();
+ });
+ },
+
finalMessage: function(){
if(this.options.finalMessage){
var dt = this;
@@ -259,7 +290,11 @@
yes: 'Yes',
autoTop: true,
autoLeft: true,
- onClose: function(){}
+ onClose: function(){},
+ trackOnResize: true,
+ hideOnClickOutside: true,
+ showCloseButton: false,
+ customClass: '',
};
})(jQuery);
diff --git a/src/darktooltip.css b/src/darktooltip.css
new file mode 100644
index 0000000..c1c60f9
--- /dev/null
+++ b/src/darktooltip.css
@@ -0,0 +1,366 @@
+.dark-tooltip {
+ display: none;
+ position: absolute;
+ z-index: 99;
+ text-decoration: none;
+ font-weight: normal;
+ height: auto;
+ top: 0;
+ left: 0;
+}
+
+.dark-tooltip.small {
+ padding: 4px;
+ font-size: 12px;
+ max-width: 150px;
+ border-radius: 2px;
+}
+
+.dark-tooltip.medium {
+ padding: 10px;
+ font-size: 14px;
+ max-width: 200px;
+ border-radius: 4px;
+}
+
+.dark-tooltip.large {
+ padding: 16px;
+ font-size: 16px;
+ max-width: 250px;
+ border-radius: 6px;
+}
+
+.dark-tooltip .tip {
+ transform: scale(1.01);
+ -webkit-transform: scale(1.01);
+ transform: scale(1.01);
+ content: "";
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ line-height: 0px;
+}
+
+.dark-tooltip.south .tip {
+ left: 50%;
+ top: 100%;
+}
+
+.dark-tooltip.west .tip {
+ left: 0;
+ top: 50%;
+}
+
+.dark-tooltip.north .tip {
+ left: 50%;
+ top: 0;
+}
+
+.dark-tooltip.east .tip {
+ left: 100%;
+ top: 50%;
+}
+
+.dark-tooltip.south.small .tip {
+ border-width: 7px 5px 0 5px;
+ margin-left: -5px;
+}
+
+.dark-tooltip.south.medium .tip {
+ border-width: 8px 6px 0 6px;
+ margin-left: -6px;
+}
+
+.dark-tooltip.south.large .tip {
+ border-width: 14px 12px 0 12px;
+ margin-left: -12px;
+}
+
+.dark-tooltip.west.small .tip {
+ border-width: 5px 7px 5px 0;
+ margin-left: -7px;
+ margin-top: -5px;
+}
+
+.dark-tooltip.west.medium .tip {
+ border-width: 6px 8px 6px 0;
+ margin-left: -8px;
+ margin-top: -6px;
+}
+
+.dark-tooltip.west.large .tip {
+ border-width: 12px 14px 12px 0;
+ margin-left: -14px;
+ margin-top: -12px;
+}
+
+.dark-tooltip.north.small .tip {
+ border-width: 0 5px 7px 5px;
+ margin-left: -5px;
+ margin-top: -7px;
+}
+
+.dark-tooltip.north.medium .tip {
+ border-width: 0 6px 8px 6px;
+ margin-left: -6px;
+ margin-top: -8px;
+}
+
+.dark-tooltip.north.large .tip {
+ border-width: 0 12px 14px 12px;
+ margin-left: -12px;
+ margin-top: -14px;
+}
+
+.dark-tooltip.east.small .tip {
+ border-width: 5px 0 5px 7px;
+ margin-top: -5px;
+}
+
+.dark-tooltip.east.medium .tip {
+ border-width: 6px 0 6px 8px;
+ margin-top: -6px;
+}
+
+.dark-tooltip.east.large .tip {
+ border-width: 12px 0 12px 14px;
+ margin-top: -12px;
+}
+
+/* confirm */
+.dark-tooltip ul.confirm {
+ list-style-type: none;
+ margin-top: 5px;
+ display: inline-block;
+ margin: 0 auto;
+}
+
+.dark-tooltip ul.confirm li {
+ padding: 10px;
+ float: left;
+ margin: 5px;
+ min-width: 25px;
+ border-radius: 3px;
+}
+
+.dark-tooltip .darktooltip-close-button span {
+ position: absolute;
+ top: 0;
+ right: 1px;
+ padding: 0;
+ cursor: pointer;
+ color: lightgray;
+ font-weight: 700;
+ font-size: 17px;
+}
+
+/* themes */
+.dark-tooltip.dark {
+ background-color: #1B1E24;
+ color: #fff;
+}
+
+.dark-tooltip.light {
+ background-color: #ebedf3;
+ color: #1B1E24;
+}
+
+.dark-tooltip.dark.south .tip {
+ border-color: #1B1E24 transparent transparent transparent;
+ _border-color: #1B1E24 #000000 #000000 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.dark.west .tip {
+ border-color: transparent #1B1E24 transparent transparent;
+ _border-color: #000000 #1B1E24 #000000 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.dark.north .tip {
+ border-color: transparent transparent #1B1E24 transparent;
+ _border-color: #000000 #000000 #1B1E24 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.dark.east .tip {
+ border-color: transparent transparent transparent #1B1E24;
+ _border-color: #000000 #000000 #000000 #1B1E24;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.light.south .tip {
+ border-color: #ebedf3 transparent transparent transparent;
+ _border-color: #ebedf3 #000000 #000000 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.light.west .tip {
+ border-color: transparent #ebedf3 transparent transparent;
+ _border-color: #000000 #ebedf3 #000000 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.light.north .tip {
+ border-color: transparent transparent #ebedf3 transparent;
+ _border-color: #000000 #000000 #ebedf3 #000000;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.light.east .tip {
+ border-color: transparent transparent transparent #ebedf3;
+ _border-color: #000000 #000000 #000000 #ebedf3;
+ _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
+}
+
+.dark-tooltip.dark ul.confirm li {
+ background-color: #416E85;
+}
+
+.dark-tooltip.dark ul.confirm li:hover {
+ background-color: #417E85;
+}
+
+.dark-tooltip.light ul.confirm li {
+ background-color: #C1DBDB;
+}
+
+.dark-tooltip.light ul.confirm li:hover {
+ background-color: #DCE8E8;
+}
+
+/* Animations */
+.animated {
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-duration: .5s;
+ animation-duration: .5s;
+}
+
+@-webkit-keyframes flipInUp {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(-90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateX(5deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateX(-5deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+}
+
+@keyframes flipInUp {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(-90deg);
+ transform: perspective(400px) rotateX(-90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateX(5deg);
+ transform: perspective(400px) rotateX(5deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateX(-5deg);
+ transform: perspective(400px) rotateX(-5deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes flipInRight {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(-90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(5deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateY(-5deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+}
+
+@keyframes flipInRight {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(-90deg);
+ transform: perspective(400px) rotateY(-90deg);
+ opacity: 0;
+ }
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(5deg);
+ transform: perspective(400px) rotateY(5deg);
+ }
+ 70% {
+ -webkit-transform: perspective(400px) rotateY(-5deg);
+ transform: perspective(400px) rotateY(-5deg);
+ }
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+}
+
+.flipIn {
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+}
+
+.flipIn.south, .flipIn.north {
+ -webkit-animation-name: flipInUp;
+ animation-name: flipInUp;
+}
+
+.flipIn.west, .flipIn.east {
+ -webkit-animation-name: flipInRight;
+ animation-name: flipInRight;
+}
+
+@-webkit-keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
+
+/* Modal */
+.darktooltip-modal-layer {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image: url("../img/modal-bg.png");
+ opacity: .7;
+ display: none;
+}
+/*# sourceMappingURL=darktooltip.css.map */
\ No newline at end of file
diff --git a/src/darktooltip.js b/src/darktooltip.js
index eba1b0a..30a1a44 100644
--- a/src/darktooltip.js
+++ b/src/darktooltip.js
@@ -118,6 +118,12 @@
if(this.options.confirm){
this.addConfirm();
}
+ if (this.options.showCloseButton) {
+ this.addCloseButton();
+ }
+ if(this.options.customClass){
+ this.addCustomClass();
+ }
},
setPositions: function(){
@@ -175,9 +181,17 @@
dt.toggle();
e.stopPropagation();
});
- $('html').click(function(){
- dt.hide();
- })
+ if (this.options.hideOnClickOutside) {
+ $('html').click(function () {
+ dt.hide();
+ });
+ }
+ }
+
+ if (this.options.trackOnResize){
+ $(window).resize( function (){
+ dt.setPositions();
+ });
}
},
@@ -194,6 +208,15 @@
this.setConfirmEvents();
},
+ addCloseButton: function () {
+ this.tooltip.append("x");
+ this.setCloseEvent();
+ },
+
+ addCustomClass: function(){
+ this.tooltip.addClass(this.options.customClass);
+ },
+
setConfirmEvents: function(){
var dt = this;
this.tooltip.find('li.darktooltip-yes').click( function(e){
@@ -206,6 +229,14 @@
});
},
+ setCloseEvent: function () {
+ var dt = this;
+ this.tooltip.find('.darktooltip-close-button').click(function (e) {
+ dt.hide();
+ e.stopPropagation();
+ });
+ },
+
finalMessage: function(){
if(this.options.finalMessage){
var dt = this;
@@ -259,7 +290,11 @@
yes: 'Yes',
autoTop: true,
autoLeft: true,
- onClose: function(){}
+ onClose: function(){},
+ trackOnResize: true,
+ hideOnClickOutside: true,
+ showCloseButton: false,
+ customClass: '',
};
})(jQuery);
diff --git a/src/darktooltip.sass b/src/darktooltip.sass
index d2ed7a7..5e4c3fa 100644
--- a/src/darktooltip.sass
+++ b/src/darktooltip.sass
@@ -154,6 +154,17 @@
border-radius: 3px
+.dark-tooltip .darktooltip-close-button span
+ position: absolute;
+ top: 0;
+ right: 1px;
+ padding: 0;
+ cursor: pointer;
+ color: lightgray;
+ font-weight: 700;
+ font-size: 17px
+
+
/* themes */
.dark-tooltip.dark
background-color: #1B1E24
@@ -426,7 +437,7 @@
@-webkit-keyframes fadeIn
0%
- opacity: 0
+ opacity: 0
100%