aboutsummaryrefslogtreecommitdiff
path: root/src/lib/minecraft/MinecraftTooltip.svelte
blob: 0cdb237a5ed500f290986dfbf9ed3d89e8fdd552 (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
<!-- 
    @component

    A tooltip that looks like when you hover over a Minecraft item in an inventory. This requires JavaScript.
 -->
<script lang="ts">
	import { registerItem } from '$lib/GlobalTooltip'
	import { onMount } from 'svelte'

	let el

	onMount(() => {
		registerItem(el)
	})
</script>

<span class="minecraft-tooltip" bind:this={el}>
	<span class="tooltip-name">
		<slot name="name" />
	</span><span class="tooltip-lore">
		<slot name="lore" />
	</span><slot />
</span>

<style>
	.minecraft-tooltip {
		/* this makes it be less dumb about the height so it doesn't add extra or anything */
		display: grid;
	}
	/* these elements exist so we can copy them later from GlobalTooltip */
	.tooltip-name,
	.tooltip-lore {
		display: none;
	}
</style>