Use InfoTooltip for a generalized tooltip component, and use this in post-reply component

src/components/InfoTooltip.vue

@@ -0,0 +1,95 @@
+<template>
+	<div
+		class='info_tooltip'
+		@mouseenter='setState(true)'
+		@mouseleave='setState(false)'
+	>
+		<div
+			class='info_tooltip__content'
+			:class="{
+				'info_tooltip__content--show': show,
+				'info_tooltip__content--pointer_events': pointerEvents,
+			}"
+		>
+			<slot name='content'></slot>
+		</div>
+		<div
+			class='info_tooltip__display'
+			:class="{
+				'info_tooltip__display--hover': show
+			}"
+		>
+			<slot name='display'></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'InfoTooltip',
+		data () {
+			return {
+				show: false,
+				pointerEvents: false
+			}
+		},
+		methods: {
+			setState (val) {
+				if(val) {
+					this.pointerEvents = true
+					this.show = true
+				} else {
+					this.show = false;
+					setTimeout(() => {
+						if(this.show) return;
+
+						this.pointerEvents = false
+					}, 300)
+				}
+			}
+		}
+	}
+</script>
+
+<style lang='scss'>
+	@import '../assets/scss/variables.scss';
+
+	.info_tooltip {
+		position: relative;
+
+		@at-root #{&}__content {
+			opacity: 0;
+			max-height: 7.5rem;
+			pointer-events: none;
+			width: 17.5rem;
+			z-index: 2;
+			overflow-y: auto;
+			position: absolute;
+			bottom: calc(100% + -0.5rem);
+			background-color: #fff;
+			padding: 0.5rem;
+			border: 0.125rem solid $color__gray--darker;
+			box-shadow: none;
+			transition: all 0.2s;
+			transition-delay: 0.3s;
+
+			@at-root #{&}--show {
+				bottom: calc(100% + 0.5rem);
+				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0,0,0,0.06);
+				opacity: 1;
+				display: initial;
+				transition: all 0.2s;
+				transition-delay: 0.5s;
+			}
+			@at-root #{&}--pointer_events {
+				pointer-events: all;
+			}
+		}
+
+		@at-root #{&}__display {
+			display: inline-flex;
+			align-items: baseline;
+			cursor: pointer;
+		}
+	}
+</style>

src/components/PostReply.vue

@@ -1,29 +1,16 @@
 <template>
-	<div
-		class='post_reply'
-		@mouseenter='setState(true)'
-		@mouseleave='setState(false)'
-		:class="{ 'post_reply--expanded': expanded }"
-	>
-		<div
-			class='post_reply__post'
-			:class="{
-				'post_reply__post--show': show,
-				'post_reply__post--pointer_events': pointerEvents,
-			}"
-		>
+	<info-tooltip class='post_reply' :class='{"post_reply--hover": hover}'>
+		<template slot='content'>
 			<div style='margin-top: -0.25rem;'>
 				<div class='post_reply__username'>{{post.User.username}}</div>
 				<div class='post_reply__date'>{{post.createdAt | formatDate('date|time', ' - ')}}</div>
 			</div>
 			<div class='post_reply__content' v-html='post.content'></div>
-		</div>
+		</template>
 		<div
+			slot='display'
 			class='post_reply__display'
 			@click='$emit("click")'
-			:class="{
-				'post_reply__display--hover': show
-			}"
 		>
 			<div
 				class='post_reply__letter'
@@ -32,34 +19,16 @@
 				{{post.User.username[0]}}
 			</div>
 		</div>
-	</div>
+	</info-tooltip>
 </template>
 
 <script>
+	import InfoTooltip from './InfoTooltip'
+
 	export default {
 		name: 'PostReply',
-		props: ['post', 'expanded'],
-		data () {
-			return {
-				show: false,
-				pointerEvents: false
-			}
-		},
-		methods: {
-			setState (val) {
-				if(val) {
-					this.pointerEvents = true
-					this.show = true
-				} else {
-					this.show = false;
-					setTimeout(() => {
-						if(this.show) return;
-
-						this.pointerEvents = false
-					}, 300)
-				}
-			}
-		}
+		props: ['post', 'hover'],
+		components: { InfoTooltip }
 	}
 </script>
 
@@ -67,7 +36,6 @@
 	@import '../assets/scss/variables.scss';
 
 	.post_reply {
-		position: relative;
 		transition: all 0.2s;
 		margin-left: -0.4rem;
 
@@ -75,7 +43,7 @@
 			margin-left: 0rem;
 		}
 
-		@at-root #{&}--expanded {
+		@at-root #{&}--hover {
 			margin: 0 0.125rem;
 
 			&:first-child {
@@ -95,34 +63,6 @@
 			color: #000;
 		}
 
-		@at-root #{&}__post {
-			opacity: 0;
-			max-height: 7.5rem;
-			pointer-events: none;
-			width: 17.5rem;
-			z-index: 2;
-			overflow-y: auto;
-			position: absolute;
-			bottom: calc(100% + -0.5rem);
-			background-color: #fff;
-			padding: 0.5rem;
-			border: 0.125rem solid $color__gray--darker;
-			box-shadow: none;
-			transition: all 0.2s;
-			transition-delay: 0.3s;
-
-			@at-root #{&}--show {
-				bottom: calc(100% + 0.5rem);
-				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0,0,0,0.06);
-				opacity: 1;
-				display: initial;
-				transition: all 0.2s;
-				transition-delay: 0.5s;
-			}
-			@at-root #{&}--pointer_events {
-				pointer-events: all;
-			}
-		}
 		@at-root #{&}__content {
 			*:first-child, *:last-child {
 				margin: 0;
@@ -140,17 +80,6 @@
 			position: relative;
 			border-radius: 1rem;
 			cursor: pointer;
-
-			@at-root #{&}--hover {
-				background-color: $color__lightgray--primary;
-			}
-
-			&:hover {
-				background-color: $color__lightgray--primary;
-			}
-			&:active {
-				background-color: $color__lightgray--darker;
-			}
 		}
 		@at-root #{&}__letter {
 			height: 1.25rem;