blob: c04b5630634b2916b950129e567a865b53967820 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<script lang="ts">
let showTooltip = $state(false);
interface Props {
username?: string;
url?: string;
onclick?: () => void;
}
let { username = 'lolo', url = '/img/default-avatar.png', onclick = () => {} }: Props = $props();
</script>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<div style="position: relative; display: inline-block;">
<!-- svelte-ignore a11y_click_events_have_key_events -->
<img
src={url ?? '/img/default-avatar.png'}
onmouseenter={() => (showTooltip = true)}
onmouseleave={() => (showTooltip = false)}
{onclick}
alt="User Avatar"
/>
{#if showTooltip}
<div class="tooltip">{username}</div>
{/if}
</div>
<style>
img {
width: 48px;
height: 48px;
border-radius: 50%;
}
.tooltip {
position: absolute;
top: 110%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
font-size: 0.9em;
z-index: 1;
pointer-events: none;
}
</style>
|
