<template>
	<span @mouseenter="isHover = true" @mouseleave="isHover = false">
		<a-icon class="explain" type="question-circle" />
		<p v-show="isHover">{{ explain }}</p>
	</span>
</template>

<script>
export default {
	name: "QuestionCircle",
	data: function () {
		return {
			isHover: false
		}
	},
	props: {
		explain: String
	}
}
</script>

<style scoped>
span {
	position: relative;
}
p {
	position:absolute;
	left: 100%;
	top: 100%;
	padding: 10px 20px;
	background-color: #000;
	color: white;
	border: 1px solid white(0.05);
	border-radius: 5px;
	display: block;
	width: 200px;
}
</style>
