From 043a363d230e4aa2c5ab02b1dfb13494a47bb93b Mon Sep 17 00:00:00 2001 From: pieringro Date: Fri, 12 Jul 2019 10:59:32 +0200 Subject: [PATCH 1/3] add trackOnResize, update position onresize event --- src/darktooltip.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/darktooltip.js b/src/darktooltip.js index eba1b0a..f62758b 100644 --- a/src/darktooltip.js +++ b/src/darktooltip.js @@ -179,6 +179,12 @@ dt.hide(); }) } + + if (this.options.trackOnResize){ + $(window).resize( function (){ + dt.setPositions(); + }); + } }, activate: function(){ @@ -259,7 +265,8 @@ yes: 'Yes', autoTop: true, autoLeft: true, - onClose: function(){} + onClose: function(){}, + trackOnResize: true }; })(jQuery); From 707775d5b994b3c42f8e41ebd667703ee0c00dc1 Mon Sep 17 00:00:00 2001 From: pieringro Date: Thu, 28 Nov 2019 16:14:15 +0100 Subject: [PATCH 2/3] new params showCloseButton, hideOnClickOutside --- demo/index.html | 20 ++ dist/darktooltip.css | 433 ++++++++++++++++++++++++++++--------- dist/darktooltip.sass | 13 +- dist/jquery.darktooltip.js | 35 ++- src/darktooltip.css | 366 +++++++++++++++++++++++++++++++ src/darktooltip.js | 28 ++- src/darktooltip.sass | 13 +- 7 files changed, 800 insertions(+), 108 deletions(-) create mode 100644 src/darktooltip.css 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 +
+
@@ -222,6 +233,15 @@

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..9145e66 100644 --- a/dist/jquery.darktooltip.js +++ b/dist/jquery.darktooltip.js @@ -118,6 +118,9 @@ if(this.options.confirm){ this.addConfirm(); } + if (this.options.showCloseButton) { + this.addCloseButton(); + } }, setPositions: function(){ @@ -175,9 +178,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 +205,11 @@ this.setConfirmEvents(); }, + addCloseButton: function () { + this.tooltip.append("x"); + this.setCloseEvent(); + }, + setConfirmEvents: function(){ var dt = this; this.tooltip.find('li.darktooltip-yes').click( function(e){ @@ -206,6 +222,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 +283,10 @@ yes: 'Yes', autoTop: true, autoLeft: true, - onClose: function(){} + onClose: function(){}, + trackOnResize: true, + hideOnClickOutside: true, + showCloseButton: false, }; })(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 f62758b..9145e66 100644 --- a/src/darktooltip.js +++ b/src/darktooltip.js @@ -118,6 +118,9 @@ if(this.options.confirm){ this.addConfirm(); } + if (this.options.showCloseButton) { + this.addCloseButton(); + } }, setPositions: function(){ @@ -175,9 +178,11 @@ dt.toggle(); e.stopPropagation(); }); - $('html').click(function(){ - dt.hide(); - }) + if (this.options.hideOnClickOutside) { + $('html').click(function () { + dt.hide(); + }); + } } if (this.options.trackOnResize){ @@ -200,6 +205,11 @@ this.setConfirmEvents(); }, + addCloseButton: function () { + this.tooltip.append("x"); + this.setCloseEvent(); + }, + setConfirmEvents: function(){ var dt = this; this.tooltip.find('li.darktooltip-yes').click( function(e){ @@ -212,6 +222,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; @@ -266,7 +284,9 @@ autoTop: true, autoLeft: true, onClose: function(){}, - trackOnResize: true + trackOnResize: true, + hideOnClickOutside: true, + showCloseButton: false, }; })(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% From f54eccd57adcd43b4975d949ee366dd878c3e3e4 Mon Sep 17 00:00:00 2001 From: pieringro Date: Tue, 10 Dec 2019 11:31:38 +0100 Subject: [PATCH 3/3] add custom class --- dist/jquery.darktooltip.js | 8 ++++++++ src/darktooltip.js | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/dist/jquery.darktooltip.js b/dist/jquery.darktooltip.js index 9145e66..30a1a44 100644 --- a/dist/jquery.darktooltip.js +++ b/dist/jquery.darktooltip.js @@ -121,6 +121,9 @@ if (this.options.showCloseButton) { this.addCloseButton(); } + if(this.options.customClass){ + this.addCustomClass(); + } }, setPositions: function(){ @@ -210,6 +213,10 @@ this.setCloseEvent(); }, + addCustomClass: function(){ + this.tooltip.addClass(this.options.customClass); + }, + setConfirmEvents: function(){ var dt = this; this.tooltip.find('li.darktooltip-yes').click( function(e){ @@ -287,6 +294,7 @@ trackOnResize: true, hideOnClickOutside: true, showCloseButton: false, + customClass: '', }; })(jQuery); diff --git a/src/darktooltip.js b/src/darktooltip.js index 9145e66..30a1a44 100644 --- a/src/darktooltip.js +++ b/src/darktooltip.js @@ -121,6 +121,9 @@ if (this.options.showCloseButton) { this.addCloseButton(); } + if(this.options.customClass){ + this.addCustomClass(); + } }, setPositions: function(){ @@ -210,6 +213,10 @@ this.setCloseEvent(); }, + addCustomClass: function(){ + this.tooltip.addClass(this.options.customClass); + }, + setConfirmEvents: function(){ var dt = this; this.tooltip.find('li.darktooltip-yes').click( function(e){ @@ -287,6 +294,7 @@ trackOnResize: true, hideOnClickOutside: true, showCloseButton: false, + customClass: '', }; })(jQuery);