zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-04 17:01:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fixed position mode (works around overflow constraints with scrollable containers)

Browse source
This commit is contained in:
CocoByte 2024-10-03 02:45:52 -06:00
parent ee59c6a074
commit 64b7a5a953
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
2 changed files with 20 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/registrar/assets/js/uswds-edited.js
View file

@ -5938,9 +5938,17 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
return offset;
};
const element_is_fixed_positioned = false
const style = window.getComputedStyle(tooltipBody);
// Check if the position property is 'fixed'
if (style.position === 'fixed') {
console.log('The element has a fixed position.');
} else {
console.log('The element does not have a fixed position.');
}
const element_is_fixed_positioned = style.position === 'fixed';
const parentRect = tooltipTrigger.getBoundingClientRect();
const element_left = element_is_fixed_positioned ? parentRect.left + parentRect.width : `50%`
const element_left = element_is_fixed_positioned ? parentRect.left + parentRect.width/2 + 'px': `50%`
const element_top = element_is_fixed_positioned ? parentRect.top + parentRect.height/2 + 'px': `50%`
/**
* Positions tooltip at the top
@ -5954,7 +5962,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
setPositionClass("top");
e.style.left = element_left; // center the element
e.style.top = `-${TRIANGLE_SIZE}px`; // consider the pseudo element
e.style.top = element_is_fixed_positioned ?`${parentRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element
// apply our margins based on the offset
e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
};
@ -5967,6 +5975,9 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
resetPositionStyles(e);
const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
setPositionClass("bottom");
if (element_is_fixed_positioned){
e.style.top = parentRect.bottom+'px';
}
e.style.left = element_left;
e.style.margin = `${TRIANGLE_SIZE}px 0 0 -${leftMargin / 2}px`;
};
@ -5979,8 +5990,9 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
resetPositionStyles(e);
const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
setPositionClass("right");
e.style.top = element_left;
e.style.left = `${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
e.style.top = element_top;
e.style.left = element_is_fixed_positioned ? `${parentRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
;
e.style.margin = `-${topMargin / 2}px 0 0 0`;
};
@ -5995,8 +6007,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
// we have to check for some utility margins
const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
setPositionClass("left");
e.style.top = element_left;
e.style.left = `-${TRIANGLE_SIZE}px`;
e.style.top = element_top;
e.style.left = element_is_fixed_positioned ? `${parentRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`;
e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin
};

2
src/registrar/assets/sass/_theme/_tooltips.scss
View file

@ -46,7 +46,7 @@
.usa-tooltip__body {
white-space: inherit;
max-width: fit-content;
// position: fixed;
position: fixed;
}
.usa-tooltip__body--wrap {