From b9caf973953951c013a08d873b0939f2d38a8afa Mon Sep 17 00:00:00 2001 From: Sam Lin Date: Thu, 11 Jul 2013 14:33:11 -0500 Subject: [PATCH 1/2] add feature for the button in the tooltip to hide the tooltip Here is the case: http://stackoverflow.com/questions/17171361/angular-ui-bootstrap-popover-with-close-button --- src/tooltip/tooltip.js | 40 +++++++++++++++++++++++++++++----------- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index 5504e581f3..f1bca9fdb5 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -36,7 +36,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) * $tooltipProvider.options( { placement: 'left' } ); * }); */ - this.options = function( value ) { + this.options = function( value ) { angular.extend( globalOptions, value ); }; @@ -103,13 +103,15 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) var startSym = $interpolate.startSymbol(); var endSym = $interpolate.endSymbol(); + //add manual-hide attribute for the button in the tooltip to hide the tooltip var template = '<'+ directiveName +'-popup '+ 'title="'+startSym+'tt_title'+endSym+'" '+ 'content="'+startSym+'tt_content'+endSym+'" '+ 'placement="'+startSym+'tt_placement'+endSym+'" '+ 'animation="tt_animation()" '+ - 'is-open="tt_isOpen"'+ + 'is-open="tt_isOpen" '+ + 'manual-hide="Hide()" ' + '>'+ ''; @@ -118,6 +120,14 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) scope: true, link: function link ( scope, element, attrs ) { var tooltip = $compile( template )( scope ); + tooltip.show = function (){ + this.css({ display: 'block'}); + }; + tooltip.hide = function (){ + this.css({ display: 'none'}); + }; + + var isTooltipExist = false; var transitionTimeout; var popupTimeout; var $body; @@ -173,11 +183,16 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) // Now we add it to the DOM because need some info about it. But it's not // visible yet anyway. - if ( appendToBody ) { - $body = $body || $document.find( 'body' ); - $body.append( tooltip ); - } else { - element.after( tooltip ); + // if tooltip is created, just show the old instance + if (!isTooltipExist) { + if ( appendToBody ) { + $body = $body || $document.find( 'body' ); + $body.append( tooltip ); + } else { + element.after( tooltip ); + } + } else { + tooltip.show(); } // Get the position of the directive element. @@ -245,12 +260,14 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) // need to wait for it to expire beforehand. // FIXME: this is a placeholder for a port of the transitions library. if ( angular.isDefined( scope.tt_animation ) && scope.tt_animation() ) { - transitionTimeout = $timeout( function () { tooltip.remove(); }, 500 ); + transitionTimeout = $timeout( function () { tooltip.hide(); }, 500 ); } else { - tooltip.remove(); + //just hide the tooltip instead of remove it, otherwise tooltip need to compile again + tooltip.hide(); } } - + //expose the function to scope + scope.Hide = hide; /** * Observe the relevant attributes. */ @@ -309,7 +326,8 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) if ( scope.tt_isOpen ) { hide(); } else { - tooltip.remove(); + // Not sure if we should use hide or remove here. if we use remove, tooltip need to recompile + tooltip.hide(); } }); } From e6ca787be3abe7a03a5f511c50fe9a1e4c11c01d Mon Sep 17 00:00:00 2001 From: Sam Lin Date: Thu, 11 Jul 2013 15:26:37 -0500 Subject: [PATCH 2/2] remove tab --- src/tooltip/tooltip.js | 40 ++++++++++++++++------------------------ 1 file changed, 16 insertions(+), 24 deletions(-) diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index f1bca9fdb5..0871b67e4b 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -36,9 +36,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) * $tooltipProvider.options( { placement: 'left' } ); * }); */ - this.options = function( value ) { - angular.extend( globalOptions, value ); - }; + this.options = function( value ) { + angular.extend( globalOptions, value ); + }; /** * This allows you to extend the set of trigger mappings available. E.g.: @@ -103,30 +103,22 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) var startSym = $interpolate.startSymbol(); var endSym = $interpolate.endSymbol(); - //add manual-hide attribute for the button in the tooltip to hide the tooltip var template = - '<'+ directiveName +'-popup '+ - 'title="'+startSym+'tt_title'+endSym+'" '+ - 'content="'+startSym+'tt_content'+endSym+'" '+ - 'placement="'+startSym+'tt_placement'+endSym+'" '+ - 'animation="tt_animation()" '+ - 'is-open="tt_isOpen" '+ - 'manual-hide="Hide()" ' + - '>'+ - ''; + '
' + + '
'; return { restrict: 'EA', scope: true, link: function link ( scope, element, attrs ) { var tooltip = $compile( template )( scope ); - tooltip.show = function (){ - this.css({ display: 'block'}); - }; - tooltip.hide = function (){ - this.css({ display: 'none'}); - }; - var isTooltipExist = false; var transitionTimeout; var popupTimeout; @@ -191,8 +183,8 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) } else { element.after( tooltip ); } - } else { - tooltip.show(); + } else { + tooltip.show(); } // Get the position of the directive element. @@ -262,12 +254,12 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] ) if ( angular.isDefined( scope.tt_animation ) && scope.tt_animation() ) { transitionTimeout = $timeout( function () { tooltip.hide(); }, 500 ); } else { - //just hide the tooltip instead of remove it, otherwise tooltip need to compile again + //just hide the tooltip instead of remove it, otherwise tooltip need to compile again tooltip.hide(); } } //expose the function to scope - scope.Hide = hide; + scope.Hide = hide; /** * Observe the relevant attributes. */