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

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);