<template>
	<div class="tooltip-container">
		<div class="trigger">
			<slot />
		</div>

		<teleport to="body">
			<div class="tooltip">
				<div class="tooltip-wrapper">
					<slot name="tooltip" />
				</div>
			</div>
		</teleport>
	</div>
</template>

<script>

</script>

<style lang="scss" scoped>
.tooltip-container {
	position: relative;
	font-size: 1rem;
}

.tooltip-frame {
	position: fixed;
}

.tooltip {
	position: absolute;
	z-index: 10;
	top: 2rem;
	background: var(--background-light);
}
</style>
