jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change Tooltip Position

Browse Source 
Summary: Change some offset to make it point more direct to an element

Reviewed By: mweststrate

Differential Revision: D21649206

fbshipit-source-id: 64b4a3851e713baa6095d819a16cd207bebdf46f
This commit is contained in:
Chaiwat Ekkaewnumchai
2020-05-21 07:54:04 -07:00
committed by Facebook GitHub Bot
parent 3723e08b50
commit b8a989214d
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
desktop/app/src/ui/components/TooltipProvider.tsx
View File

@@ -89,9 +89,11 @@ const BUBBLE_LR_POSITION_HORIZONTAL_OFFSET = 5;
// offset on bubble when tail is showing // offset on bubble when tail is showing
const BUBBLE_SHOWTAIL_OFFSET = 5; const BUBBLE_SHOWTAIL_OFFSET = 5;
// horizontal offset on tail when position is 'above' or 'below' // horizontal offset on tail when position is 'above' or 'below'
const TAIL_AB_POSITION_HORIZONTAL_OFFSET = 15; const TAIL_AB_POSITION_HORIZONTAL_OFFSET = 4;
// vertical offset on tail when position is 'toLeft' or 'toRight' // horizontal offset on tail when position is 'toLeft' or 'toRight'
const TAIL_LR_POSITION_HORIZONTAL_OFFSET = 5; const TAIL_LR_POSITION_HORIZONTAL_OFFSET = 5;
// vertical offset on tail when position is 'toLeft' or 'toRight'
const TAIL_LR_POSITION_VERTICAL_OFFSET = 12;
const TooltipTail = styled.div<{ const TooltipTail = styled.div<{
top: TopProperty<number>; top: TopProperty<number>;
@@ -229,13 +231,13 @@ function getTooltipTail(tooltip: TooltipObject) {
bottom = window.innerHeight - tooltip.rect.top; bottom = window.innerHeight - tooltip.rect.top;
} else if (opts.position === 'toRight') { } else if (opts.position === 'toRight') {
left = tooltip.rect.right + TAIL_LR_POSITION_HORIZONTAL_OFFSET; left = tooltip.rect.right + TAIL_LR_POSITION_HORIZONTAL_OFFSET;
top = tooltip.rect.top; top = tooltip.rect.top + TAIL_LR_POSITION_VERTICAL_OFFSET;
} else if (opts.position === 'toLeft') { } else if (opts.position === 'toLeft') {
right = right =
window.innerWidth - window.innerWidth -
tooltip.rect.left + tooltip.rect.left +
TAIL_LR_POSITION_HORIZONTAL_OFFSET; TAIL_LR_POSITION_HORIZONTAL_OFFSET;
top = tooltip.rect.top; top = tooltip.rect.top + TAIL_LR_POSITION_VERTICAL_OFFSET;
} }
return ( return (
@@ -258,7 +260,7 @@ function getTooltipBubble(tooltip: TooltipObject) {
let right: RightProperty<number> = 'auto'; let right: RightProperty<number> = 'auto';
if (opts.position === 'below') { if (opts.position === 'below') {
left = tooltip.rect.left; left = tooltip.rect.left + BUBBLE_BELOW_POSITION_VERTICAL_OFFSET;
top = tooltip.rect.bottom; top = tooltip.rect.bottom;
if (opts.showTail) { if (opts.showTail) {
top += BUBBLE_SHOWTAIL_OFFSET; top += BUBBLE_SHOWTAIL_OFFSET;
@@ -268,13 +270,13 @@ function getTooltipBubble(tooltip: TooltipObject) {
if (opts.showTail) { if (opts.showTail) {
bottom += BUBBLE_SHOWTAIL_OFFSET; bottom += BUBBLE_SHOWTAIL_OFFSET;
} }
left = tooltip.rect.left; left = tooltip.rect.left + BUBBLE_BELOW_POSITION_VERTICAL_OFFSET;
} else if (opts.position === 'toRight') { } else if (opts.position === 'toRight') {
left = tooltip.rect.right + BUBBLE_LR_POSITION_HORIZONTAL_OFFSET; left = tooltip.rect.right + BUBBLE_LR_POSITION_HORIZONTAL_OFFSET;
if (opts.showTail) { if (opts.showTail) {
left += BUBBLE_SHOWTAIL_OFFSET; left += BUBBLE_SHOWTAIL_OFFSET;
} }
top = tooltip.rect.top + BUBBLE_BELOW_POSITION_VERTICAL_OFFSET; top = tooltip.rect.top;
} else if (opts.position === 'toLeft') { } else if (opts.position === 'toLeft') {
right = right =
window.innerWidth - window.innerWidth -
@@ -283,7 +285,7 @@ function getTooltipBubble(tooltip: TooltipObject) {
if (opts.showTail) { if (opts.showTail) {
right += BUBBLE_SHOWTAIL_OFFSET; right += BUBBLE_SHOWTAIL_OFFSET;
} }
top = tooltip.rect.top + BUBBLE_BELOW_POSITION_VERTICAL_OFFSET; top = tooltip.rect.top;
} }
return ( return (