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

feat(tooltip): Update tooltip placement after height changes #1110

Closed
calvinfroedge wants to merge 1 commit into from
Closed

feat(tooltip): Update tooltip placement after height changes #1110

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 69 additions & 42 deletions src/tooltip/tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
hide();
});
}


// Listener for height, which we will unset on hide
var heightListener = false;

// Show the tooltip popup element.
function show() {
var position,
Expand Down Expand Up @@ -175,49 +178,69 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
}

// Get the position of the directive element.
position = appendToBody ? $position.offset( element ) : $position.position( element );
function calculatePosition () {
position = appendToBody ? $position.offset( element ) : $position.position( element );

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

// Calculate the tooltip's top and left coordinates to center it with
// this directive.
switch ( scope.tt_placement ) {
case 'right':
ttPosition = {
top: position.top + position.height / 2 - ttHeight / 2,
left: position.left + position.width
};
break;
case 'bottom':
ttPosition = {
top: position.top + position.height,
left: position.left + position.width / 2 - ttWidth / 2
};
break;
case 'left':
ttPosition = {
top: position.top + position.height / 2 - ttHeight / 2,
left: position.left - ttWidth
};
break;
default:
ttPosition = {
top: position.top - ttHeight,
left: position.left + position.width / 2 - ttWidth / 2
};
break;
}

ttPosition.top += 'px';
ttPosition.left += 'px';
// Get the height and width of the tooltip so we can center it.
ttWidth = tooltip.prop( 'offsetWidth' );
ttHeight = tooltip.prop( 'offsetHeight' );
}
calculatePosition();

// Now set the calculated positioning.
tooltip.css( ttPosition );

// And show the tooltip.
scope.tt_isOpen = true;
// Calculate the tooltip's top and left coordinates to center it with
// this directive
function calculatePlacement () {
switch ( scope.tt_placement ) {
case 'right':
ttPosition = {
top: position.top + position.height / 2 - ttHeight / 2,
left: position.left + position.width
};
break;
case 'bottom':
ttPosition = {
top: position.top + position.height,
left: position.left + position.width / 2 - ttWidth / 2
};
break;
case 'left':
ttPosition = {
top: position.top + position.height / 2 - ttHeight / 2,
left: position.left - ttWidth
};
break;
default:
ttPosition = {
top: position.top - ttHeight,
left: position.left + position.width / 2 - ttWidth / 2
};
break;
}
}

function makePlacement () {
calculatePosition();
calculatePlacement();
console.log('making placement', ttPosition.top, ttPosition.left);

ttPosition.top += 'px';
ttPosition.left += 'px';

// Now set the calculated positioning.
tooltip.css( ttPosition );

// And show the tooltip.
scope.tt_isOpen = true;
}
makePlacement();

//Set a listener which will change the height
heightListener = setInterval(function() {
//If calculated position does not match current position, adjust the height
if( position.top != $position.offset( element ).top ){
makePlacement();
}
}, 100);
}

// Hide the tooltip popup element.
Expand All @@ -236,6 +259,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
} else {
tooltip.remove();
}

//Unset heightListener to avoid memory leaks
clearInterval(heightListener);
heightListener = false;
}

/**
Expand Down