zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-05-18 18:39:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

implemented feedback

Browse source
This commit is contained in:
CocoByte 2024-10-10 22:10:11 -06:00
parent c671c44cbf
commit b34d4cc140
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
2 changed files with 35 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5940,21 +5940,22 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
return offset;
};
/*
DOTGOV: Tooltip positioning logic updated to allow position:fixed
*/
// ---- DOTGOV EDIT (Added section)
// DOTGOV: Tooltip positioning logic updated to allow position:fixed
const tooltipStyle = window.getComputedStyle(tooltipBody);
const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed';
const triggerRect = tooltipTrigger.getBoundingClientRect(); //detect if tooltip is set to "fixed" position
const targetLeft = tooltipIsFixedPositioned ? triggerRect.left + triggerRect.width/2 + 'px': `50%`
const targetTop = tooltipIsFixedPositioned ? triggerRect.top + triggerRect.height/2 + 'px': `50%`
if (tooltipIsFixedPositioned) {
// DOTGOV: Add listener to handle scrolling if tooltip position = 'fixed'
// (so that the tooltip doesn't appear to stick to the screen)
/* DOTGOV: Add listener to handle scrolling if tooltip position = 'fixed'
(so that the tooltip doesn't appear to stick to the screen) */
window.addEventListener('scroll', function() {
findBestPosition(tooltipBody)
});
}
// ---- END DOTGOV EDIT
/**
* Positions tooltip at the top
* @param {HTMLElement} e - this is the tooltip body
@ -5967,9 +5968,15 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
setPositionClass("top");
// ---- DOTGOV EDIT
// e.style.left = `50%`; // center the element
// e.style.top = `-${TRIANGLE_SIZE}px`; // consider the pseudo element
// DOTGOV: updated logic for position:fixed
e.style.left = targetLeft; // center the element
e.style.top = tooltipIsFixedPositioned ?`${triggerRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element
// ---- END DOTGOV EDIT
// apply our margins based on the offset
e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
};
@ -5983,10 +5990,15 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
setPositionClass("bottom");
// ---- DOTGOV EDIT
// e.style.left = `50%`;
// DOTGOV: updated logic for position:fixed
if (tooltipIsFixedPositioned){
e.style.top = triggerRect.bottom+'px';
}
// ---- END DOTGOV EDIT
e.style.left = targetLeft;
e.style.margin = `${TRIANGLE_SIZE}px 0 0 -${leftMargin / 2}px`;
};
@ -6000,10 +6012,15 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
setPositionClass("right");
// ---- DOTGOV EDIT
// e.style.top = `50%`;
// e.style.left = `${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
// DOTGOV: updated logic for position:fixed
e.style.top = targetTop;
e.style.left = tooltipIsFixedPositioned ? `${triggerRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
;
// ---- END DOTGOV EDIT
e.style.margin = `-${topMargin / 2}px 0 0 0`;
};
@ -6019,9 +6036,15 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
setPositionClass("left");
// ---- DOTGOV EDIT
// e.style.top = `50%`;
// e.style.left = `-${TRIANGLE_SIZE}px`;
// DOTGOV: updated logic for position:fixed
e.style.top = targetTop;
e.style.left = tooltipIsFixedPositioned ? `${triggerRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`;
// ---- END DOTGOV EDIT
e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin
};
@ -6158,12 +6181,16 @@ const setUpAttributes = tooltipTrigger => {
tooltipBody.setAttribute("aria-hidden", "true");
// place the text in the tooltip
// -- DOTGOV EDIT
// tooltipBody.textContent = tooltipContent;
// DOTGOV: nest the text element to allow us greater control over width and wrapping behavior
tooltipBody.innerHTML = `
<div class="usa-tooltip__content">
${tooltipContent}
</div>`
// tooltipBody.textContent = tooltipContent;
// -- END DOTGOV EDIT
return {
tooltipBody,

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

@ -66,7 +66,7 @@
text-align: center;
font-size: inherit; //inherit tooltip fontsize of .93rem
max-width: fit-content;
@include at-media('tablet') {
@include at-media('desktop') {
width: 70vw;
}
}