rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): center icon tooltips over their trigger (#11382)

Browse source
This commit is contained in:
🏔️ Peak 2026-08-18 23:29:09 +02:00 committed by GitHub
parent 81f3cc6446
commit 25df9ec473
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/views/components/icon-tooltip.blade.php
View file

@ -38,11 +38,11 @@
this.visible = true;
const rect = target.getBoundingClientRect();
this.below = rect.top < 48;
this.x = rect.left;
this.x = rect.left + rect.width / 2;
this.y = this.below ? rect.bottom + 8 : rect.top - 8;
this.$nextTick(() => {
const width = this.$refs.tooltip?.offsetWidth || 0;
this.x = Math.max(8, Math.min(window.innerWidth - width - 8, this.x));
this.x = Math.max(8, Math.min(window.innerWidth - width - 8, this.x - width / 2));
this.$nextTick(() => this.positioned = true);
});
},

7
tests/Feature/GlobalIconTooltipTest.php
View file

@ -36,12 +36,11 @@
->toContain("positioned ? 'visible' : 'invisible'");
});
it('anchors tooltips to the trigger and lets them grow toward the right', function () {
it('centers tooltips on the trigger and keeps them within the viewport', function () {
$tooltip = file_get_contents(resource_path('views/components/icon-tooltip.blade.php'));
expect($tooltip)
->toContain('this.x = rect.left;')
->toContain('Math.min(window.innerWidth - width - 8, this.x)')
->not->toContain('rect.left + rect.width / 2')
->toContain('this.x = rect.left + rect.width / 2;')
->toContain('Math.min(window.innerWidth - width - 8, this.x - width / 2)')
->not->toContain('-translate-x-1/2');
});