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

		<div class="tooltip">
			<div class="tooltip-wrapper">
				<slot name="popover" />
			</div>
		</div>
	</div>
</template>

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

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