Skip to content

fix(tooltip): tweak the calculation of tooltip offset to make it look not so near to the target element. #15588

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
100pah merged 1 commit into from
Aug 24, 2021
Merged

fix(tooltip): tweak the calculation of tooltip offset to make it look not so near to the target element. #15588

Show file tree
Hide file tree
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
15 changes: 0 additions & 15 deletions src/component/tooltip/TooltipHTMLContent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,21 +519,6 @@ class TooltipHTMLContent {
this.el.parentNode.removeChild(this.el);
}

getOuterSize() {
let width = this.el.clientWidth;
let height = this.el.clientHeight;

// Consider browser compatibility.
// IE8 does not support getComputedStyle.
const stl = getComputedStyle(this.el);
if (stl) {
width += parseInt(stl.borderLeftWidth, 10) + parseInt(stl.borderRightWidth, 10);
height += parseInt(stl.borderTopWidth, 10) + parseInt(stl.borderBottomWidth, 10);
}

return {width: width, height: height};
}

}

export default TooltipHTMLContent;
8 changes: 0 additions & 8 deletions src/component/tooltip/TooltipRichContent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,14 +205,6 @@ class TooltipRichContent {
return this._show;
}

getOuterSize() {
const size = this.getSize();
return {
width: size[0],
height: size[1]
};
}

dispose() {
this._zr.remove(this.el);
}
Expand Down
16 changes: 8 additions & 8 deletions src/component/tooltip/TooltipView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -905,7 +905,7 @@ class TooltipView extends ComponentView {
// Specify tooltip position by string 'top' 'bottom' 'left' 'right' around graphic element
else if (zrUtil.isString(positionExpr) && el) {
const pos = calcTooltipPosition(
positionExpr, rect, contentSize, tooltipModel.get('borderWidth'),
positionExpr, rect, contentSize, tooltipModel.get('borderWidth')
);
x = pos[0];
y = pos[1];
Expand Down Expand Up @@ -1067,9 +1067,9 @@ function refixTooltipPosition(
viewWidth: number, viewHeight: number,
gapH: number, gapV: number
) {
const size = content.getOuterSize();
const width = size.width;
const height = size.height;
const size = content.getSize();
const width = size[0];
const height = size[1];

if (gapH != null) {
// Add extra 2 pixels for this case:
Expand Down Expand Up @@ -1100,9 +1100,9 @@ function confineTooltipPosition(
viewWidth: number,
viewHeight: number
): [number, number] {
const size = content.getOuterSize();
const width = size.width;
const height = size.height;
const size = content.getSize();
const width = size[0];
const height = size[1];

x = Math.min(x + width, viewWidth) - width;
y = Math.min(y + height, viewHeight) - height;
Expand All @@ -1120,7 +1120,7 @@ function calcTooltipPosition(
): [number, number] {
const domWidth = contentSize[0];
const domHeight = contentSize[1];
const offset = Math.max(Math.ceil(Math.sqrt(2 * borderWidth * borderWidth)), 5);
const offset = Math.ceil(Math.SQRT2 * borderWidth) + 8;
let x = 0;
let y = 0;
const rectWidth = rect.width;
Expand Down