gkorotkiy/bastion-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animate delayed search filter tooltips

Browse Source
This commit is contained in:
KrivovDE
2026-09-09 17:05:25 +03:00
parent dfa0548b35
commit aba902cf9c
2 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/main.css
View File

@@ -3717,7 +3717,7 @@ body.organization-view:not(.expanded) #content>#stability>.bankruptcy-timeline{
.search-result-filters-tooltip{
position:fixed;
z-index:1000;
display:none;
display:block;
width:max-content;
max-width:min(30rem,70vw);
padding:.625rem .75rem;
@@ -3726,15 +3726,28 @@ body.organization-view:not(.expanded) #content>#stability>.bankruptcy-timeline{
color:#e2e7e9;
background:#262a2c;
box-shadow:0 .5rem 1.25rem rgba(0,0,0,.45);
opacity:0;
pointer-events:none;
transform:translateY(-.375rem) scale(.985);
transform-origin:top left;
transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility 0s linear .2s;
visibility:hidden;
white-space:normal;
will-change:opacity,transform;
}
.search-result-filters-tooltip span{
display:block;
padding:.1875rem 0;
}
.search-result-filters-tooltip.is-visible{
display:block;
opacity:1;
transform:translateY(0) scale(1);
transition-delay:0s;
visibility:visible;
}
@media(prefers-reduced-motion:reduce){
.search-result-filters-tooltip{transition:none;transform:none}
}
@media(max-width:64rem){

58
assets/js/app.js
View File

@@ -1323,20 +1323,27 @@ const renderSearchResults=()=>{
const tooltipText=document.createElement('span');
tooltipText.textContent=fullText;
tooltip.append(tooltipText);
let tooltipTimer=0;
const showTooltip=()=>{
if(item.scrollWidth<=item.clientWidth)return;
tooltip.classList.add('is-visible');
const anchorRect=item.getBoundingClientRect();
const tooltipRect=tooltip.getBoundingClientRect();
const left=Math.max(.5*16,Math.min(anchorRect.left,innerWidth-tooltipRect.width-.5*16));
const below=anchorRect.bottom+.5*16;
const top=below+tooltipRect.height<=innerHeight-.5*16
? below
: Math.max(.5*16,anchorRect.top-tooltipRect.height-.5*16);
tooltip.style.left=`${left}px`;
tooltip.style.top=`${top}px`;
clearTimeout(tooltipTimer);
tooltipTimer=setTimeout(()=>{
const anchorRect=item.getBoundingClientRect();
const tooltipRect=tooltip.getBoundingClientRect();
const left=Math.max(.5*16,Math.min(anchorRect.left,innerWidth-tooltipRect.width-.5*16));
const below=anchorRect.bottom+.5*16;
const top=below+tooltipRect.height<=innerHeight-.5*16
? below
: Math.max(.5*16,anchorRect.top-tooltipRect.height-.5*16);
tooltip.style.left=`${left}px`;
tooltip.style.top=`${top}px`;
tooltip.classList.add('is-visible');
},420);
};
const hideTooltip=()=>{
clearTimeout(tooltipTimer);
tooltip.classList.remove('is-visible');
};
const hideTooltip=()=>tooltip.classList.remove('is-visible');
item.addEventListener('mouseenter',showTooltip);
item.addEventListener('mouseleave',hideTooltip);
item.addEventListener('focus',showTooltip);
@@ -1374,19 +1381,26 @@ const renderSearchResults=()=>{
tooltip.append(item);
});
more.setAttribute('aria-describedby',tooltipId);
let tooltipTimer=0;
const showTooltip=()=>{
tooltip.classList.add('is-visible');
const anchorRect=more.getBoundingClientRect();
const tooltipRect=tooltip.getBoundingClientRect();
const left=Math.max(.5*16,Math.min(anchorRect.right-tooltipRect.width,innerWidth-tooltipRect.width-.5*16));
const below=anchorRect.bottom+.5*16;
const top=below+tooltipRect.height<=innerHeight-.5*16
? below
: Math.max(.5*16,anchorRect.top-tooltipRect.height-.5*16);
tooltip.style.left=`${left}px`;
tooltip.style.top=`${top}px`;
clearTimeout(tooltipTimer);
tooltipTimer=setTimeout(()=>{
const anchorRect=more.getBoundingClientRect();
const tooltipRect=tooltip.getBoundingClientRect();
const left=Math.max(.5*16,Math.min(anchorRect.right-tooltipRect.width,innerWidth-tooltipRect.width-.5*16));
const below=anchorRect.bottom+.5*16;
const top=below+tooltipRect.height<=innerHeight-.5*16
? below
: Math.max(.5*16,anchorRect.top-tooltipRect.height-.5*16);
tooltip.style.left=`${left}px`;
tooltip.style.top=`${top}px`;
tooltip.classList.add('is-visible');
},420);
};
const hideTooltip=()=>{
clearTimeout(tooltipTimer);
tooltip.classList.remove('is-visible');
};
const hideTooltip=()=>tooltip.classList.remove('is-visible');
more.addEventListener('mouseenter',showTooltip);
more.addEventListener('mouseleave',hideTooltip);
more.addEventListener('focus',showTooltip);