HelpPopup Component Code

<template>
	<q-menu :offset="[0, 10]" class="q-menu-arrow" anchor="bottom middle" self="top middle" style="max-width: 300px">
		<q-banner>
			<slot></slot>
		</q-banner>
	</q-menu>
</template>

<script>

export default {
	name: 'HelpPopup',
	
	setup() {
		return {};
	}
};
</script>

<style scoped>
.q-menu-arrow:before {
	/* layout */
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
	left: 1.5em; /* offset should move with padding of parent */
	border: .75rem solid transparent;
	border-top: none;
	
	/* looks */
	border-bottom-color: #fff;
	filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}
</style>