gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-02 07:53:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix tooltip inconsistencies with design

Browse Source
This commit is contained in:
Mattias Granlund 2023-11-22 16:57:00 +01:00
parent 23eade8d53
commit 4c8c0d9bb2
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/ui/src/lib/components/Tooltip.svelte
View File

@ -10,7 +10,7 @@
const [floatingRef, floatingContent] = createFloatingActions({
strategy: 'absolute',
placement: placement,
middleware: [offset(8), flip(), shift()]
middleware: [offset(4), flip(), shift()]
});
let showTooltip = false;
@ -19,7 +19,7 @@
<div
role="tooltip"
class="inline-block"
class="wrapper"
on:mouseenter={() => (timeout = setTimeout(() => (showTooltip = true), timeoutMilliseconds))}
on:mouseleave={() => {
clearTimeout(timeout);
@ -29,13 +29,16 @@
>
<slot />
{#if showTooltip}
<div role="tooltip" class="tooltip" use:floatingContent>
<span>{label}</span>
<div role="tooltip" class="tooltip text-base-11" use:floatingContent>
{label}
</div>
{/if}
</div>
<style lang="postcss">
.wrapper {
display: inline-block;
}
.tooltip {
background-color: var(--clr-core-ntrl-10);
border-radius: var(--radius-s);