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

Commit

Permalink
chore($tooltip): $tooltip now uses $position
Browse files Browse the repository at this point in the history
To calculate the relative position of the tooltip or popover, the
$tooltip service now uses the $position service, which resolves many
positioning bugs.

Closes #265, #115
  • Loading branch information
Josh David Miller committed Apr 26, 2013
1 parent 7bd1a91 commit 5663cfd
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 14 deletions.
2 changes: 2 additions & 0 deletions src/popover/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,5 @@ will display:
- `popover-popup-delay`: For how long should the user have to have the mouse
over the element before the popover shows (in milliseconds)? Defaults to 0.

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,3 +16,5 @@ 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.

The tooltip directives require the `$position` service.

17 changes: 3 additions & 14 deletions src/tooltip/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* function, placement as a function, inside, support for more triggers than
* just mouse enter/leave, html tooltips, and selector delegation.
*/
angular.module( 'ui.bootstrap.tooltip', [] )
angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )

/**
* The $tooltip service creates tooltip- and popover-like directives as well as
Expand Down Expand Up @@ -48,7 +48,7 @@ angular.module( 'ui.bootstrap.tooltip', [] )
* Returns the actual instance of the $tooltip service.
* TODO support multiple triggers
*/
this.$get = [ '$window', '$compile', '$timeout', '$parse', '$document', function ( $window, $compile, $timeout, $parse, $document ) {
this.$get = [ '$window', '$compile', '$timeout', '$parse', '$document', '$position', function ( $window, $compile, $timeout, $parse, $document, $position ) {
return function $tooltip ( type, prefix, defaultTriggerShow, defaultTriggerHide ) {
var options = angular.extend( {}, defaultOptions, globalOptions );
var directiveName = snake_case( type );
Expand All @@ -63,17 +63,6 @@ angular.module( 'ui.bootstrap.tooltip', [] )
'>'+
'</'+ directiveName +'-popup>';

// Calculate the current position and size of the directive element.
function getPosition( element ) {
var boundingClientRect = element[0].getBoundingClientRect();
return {
width: element.prop( 'offsetWidth' ),
height: element.prop( 'offsetHeight' ),
top: boundingClientRect.top + $window.pageYOffset,
left: boundingClientRect.left + $window.pageXOffset
};
}

return {
restrict: 'EA',
scope: true,
Expand Down Expand Up @@ -148,7 +137,7 @@ angular.module( 'ui.bootstrap.tooltip', [] )
}

// Get the position of the directive element.
position = getPosition( element );
position = $position.position( element );

// Get the height and width of the tooltip so we can center it.
ttWidth = tooltip.prop( 'offsetWidth' );
Expand Down

0 comments on commit 5663cfd

Please sign in to comment.