From dd8a0fdd429c19846fb15d52535092911faa7e11 Mon Sep 17 00:00:00 2001 From: aunger Date: Mon, 27 Apr 2015 16:03:51 -0500 Subject: [PATCH 1/5] add optional close button --- Readme.md | 6 ++++++ src/js/angular-tooltips.js | 16 +++++++++++----- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/Readme.md b/Readme.md index f202b9c..3b79e19 100644 --- a/Readme.md +++ b/Readme.md @@ -152,6 +152,12 @@ You can set your tooltip to show/hide on specific event/events, you can use the Show tooltip on click and mouseover and hide tooltip only on click ``` +If you want to hide on click, you can configure a close button using text or HTML. This allows your users to click the button inside the tooltip instead of clicking on the original trigger. +```html +Show tooltip on click and mouseover and hide tooltip only on click, with option to click on the X +Show tooltip on click and mouseover and hide tooltip only on click, with option to click on HTML button +``` + ####Tooltip CSS class You can set a custom CSS class or a set of, using the `tooltip-class=""` attribute: ```html diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index 359f126..4fb4ddc 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -37,11 +37,17 @@ , className = attr.tooltipClass || '' , speed = (attr.tooltipSpeed || 'medium').toLowerCase() , lazyMode = typeof attr.tooltipLazy !== 'undefined' && attr.tooltipLazy !== null ? $scope.$eval(attr.tooltipLazy) : true - , htmlTemplate = - '
' + - '
' + title + '
' + - content + ' ' + - '
'; + , hasCloseButton = typeof attr.closeButton !== 'undefined' && attr.closeButton !== null + , closeButtonText = attr.closeButton || '' + , htmlTemplate = '
'; + + if (hasCloseButton) { + htmlTemplate = htmlTemplate + ' ' + closeButtonText + ' ' + } + + htmlTemplate = htmlTemplate + '
' + title + '
' + + content + ' ' + + '
'; //parse the animation speed of tooltips $scope.parseSpeed = function parseSpeed () { From 0d65c5ad45977ec07c4cd7322699aa025d7a457a Mon Sep 17 00:00:00 2001 From: aunger Date: Tue, 28 Apr 2015 08:25:43 -0500 Subject: [PATCH 2/5] use appropriate attribute naming convention --- src/js/angular-tooltips.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index 4fb4ddc..aee4ee3 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -37,8 +37,8 @@ , className = attr.tooltipClass || '' , speed = (attr.tooltipSpeed || 'medium').toLowerCase() , lazyMode = typeof attr.tooltipLazy !== 'undefined' && attr.tooltipLazy !== null ? $scope.$eval(attr.tooltipLazy) : true - , hasCloseButton = typeof attr.closeButton !== 'undefined' && attr.closeButton !== null - , closeButtonText = attr.closeButton || '' + , hasCloseButton = typeof attr.tooltipCloseButton !== 'undefined' && attr.tooltipCloseButton !== null + , closeButtonText = attr.tooltipCloseButton || '' , htmlTemplate = '
'; if (hasCloseButton) { From 779e33c3f42acbaaff1eb84ab4da79d1dda74276 Mon Sep 17 00:00:00 2001 From: aunger Date: Tue, 28 Apr 2015 08:27:39 -0500 Subject: [PATCH 3/5] better variable name - attr.tooltipCloseButton can contain HTML as well as plain text --- src/js/angular-tooltips.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index aee4ee3..b095dc1 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -38,11 +38,11 @@ , speed = (attr.tooltipSpeed || 'medium').toLowerCase() , lazyMode = typeof attr.tooltipLazy !== 'undefined' && attr.tooltipLazy !== null ? $scope.$eval(attr.tooltipLazy) : true , hasCloseButton = typeof attr.tooltipCloseButton !== 'undefined' && attr.tooltipCloseButton !== null - , closeButtonText = attr.tooltipCloseButton || '' + , closeButtonContent = attr.tooltipCloseButton || '' , htmlTemplate = '
'; if (hasCloseButton) { - htmlTemplate = htmlTemplate + ' ' + closeButtonText + ' ' + htmlTemplate = htmlTemplate + ' ' + closeButtonContent + ' ' } htmlTemplate = htmlTemplate + '
' + title + '
' + From 2e940ec53a6a79d8b78cd0d28be168cf58059b68 Mon Sep 17 00:00:00 2001 From: aunger Date: Tue, 28 Apr 2015 08:56:05 -0500 Subject: [PATCH 4/5] use new attributes in documentation --- Readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Readme.md b/Readme.md index 3b79e19..44f93ec 100644 --- a/Readme.md +++ b/Readme.md @@ -154,8 +154,8 @@ You can set your tooltip to show/hide on specific event/events, you can use the If you want to hide on click, you can configure a close button using text or HTML. This allows your users to click the button inside the tooltip instead of clicking on the original trigger. ```html -Show tooltip on click and mouseover and hide tooltip only on click, with option to click on the X -Show tooltip on click and mouseover and hide tooltip only on click, with option to click on HTML button +Show tooltip on click and mouseover and hide tooltip only on click, with option to click on the X +Show tooltip on click and mouseover and hide tooltip only on click, with option to click on HTML button ``` ####Tooltip CSS class From 3662fff292d25b32b56ad59658ee7a46be63e7d7 Mon Sep 17 00:00:00 2001 From: aunger Date: Tue, 28 Apr 2015 08:56:35 -0500 Subject: [PATCH 5/5] add default styles and demo for close button --- index.html | 15 +++++++++++++++ src/css/angular-tooltips.css | 3 +++ src/js/angular-tooltips.js | 2 +- 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6055d57..24c7197 100644 --- a/index.html +++ b/index.html @@ -90,6 +90,21 @@
+ +
+
+ + Close button: hover to open, click to close + +
+ +
+
+ + Close button: click to open and close + +
+
diff --git a/src/css/angular-tooltips.css b/src/css/angular-tooltips.css index b2a9f44..6d3f471 100644 --- a/src/css/angular-tooltips.css +++ b/src/css/angular-tooltips.css @@ -119,3 +119,6 @@ border-left-color: transparent; border-top-width: 0; } +._720kb-tooltip-close-button { + float: right; +} diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index b095dc1..153ebc0 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -42,7 +42,7 @@ , htmlTemplate = '
'; if (hasCloseButton) { - htmlTemplate = htmlTemplate + ' ' + closeButtonContent + ' ' + htmlTemplate = htmlTemplate + ' ' + closeButtonContent + ' '; } htmlTemplate = htmlTemplate + '
' + title + '
' +