Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(tooltip): add *-append-to-body attribute
Browse files Browse the repository at this point in the history
The tooltip and popover directives (through the $tooltip service) now
support using an attribute in addition to the provider to set a
particular tooltip or popover to use $body as the container for the
popup element rather than the directive element's parent.

Closes #395.
  • Loading branch information
joshdmiller authored and pkozlowski-opensource committed Jun 24, 2013
1 parent ace7bc6 commit d089626
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 2 deletions.
2 changes: 2 additions & 0 deletions src/popover/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ will display:
over the element before the popover shows (in milliseconds)? Defaults to 0.
- `popover-trigger`: What should trigger the show of the popover? See the
`tooltip` directive for supported values.
- `popover-append-to-body`: Should the tooltip be appended to `$body` instead of
the parent element?

The popover directives require the `$position` service.

2 changes: 2 additions & 0 deletions src/tooltip/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ will display:
- `tooltip-popup-delay`: For how long should the user have to have the mouse
over the element before the tooltip shows (in milliseconds)? Defaults to 0.
- `tooltip-trigger`: What should trigger a show of the tooltip?
- `tooltip-append-to-body`: Should the tooltip be appended to `$body` instead of
the parent element?

The tooltip directives require the `$position` service.

Expand Down
27 changes: 27 additions & 0 deletions src/tooltip/test/tooltip.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,33 @@ describe('tooltip', function() {
}));
});

describe( 'with an append-to-body attribute', function() {
var scope, elmBody, elm, elmScope;

beforeEach( inject( function( $rootScope ) {
scope = $rootScope;
}));

it( 'should append to the body', inject( function( $compile, $document ) {
$body = $document.find( 'body' );
elmBody = angular.element(
'<div><span tooltip="tooltip text" tooltip-append-to-body="true">Selector Text</span></div>'
);

$compile(elmBody)(scope);
scope.$digest();
elm = elmBody.find('span');
elmScope = elm.scope();

var bodyLength = $body.children().length;
elm.trigger( 'mouseenter' );

expect( elmScope.tt_isOpen ).toBe( true );
expect( elmBody.children().length ).toBe( 1 );
expect( $body.children().length ).toEqual( bodyLength + 1 );
}));
});

});

describe('tooltipWithDifferentSymbols', function() {
Expand Down
9 changes: 7 additions & 2 deletions src/tooltip/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
var transitionTimeout;
var popupTimeout;
var $body;
var appendToBody = angular.isDefined( options.appendToBody ) ? options.appendToBody : false;

// By default, the tooltip is not open.
// TODO add ability to start tooltip opened
Expand Down Expand Up @@ -163,7 +164,7 @@ 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 ( options.appendToBody ) {
if ( appendToBody ) {
$body = $body || $document.find( 'body' );
$body.append( tooltip );
} else {
Expand Down Expand Up @@ -279,10 +280,14 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
}
});

attrs.$observe( prefix+'AppendToBody', function ( val ) {
appendToBody = angular.isDefined( val ) ? $parse( val )( scope ) : appendToBody;
});

// if a tooltip is attached to <body> we need to remove it on
// location change as its parent scope will probably not be destroyed
// by the change.
if ( options.appendToBody ) {
if ( appendToBody ) {
scope.$on('$locationChangeSuccess', function closeTooltipOnLocationChangeSuccess () {
if ( scope.tt_isOpen ) {
hide();
Expand Down

0 comments on commit d089626

Please sign in to comment.