Add error-tooltip component and use this to replace error tooltips in other components

src/components/ErrorTooltip.vue

@@ -0,0 +1,62 @@
+<template>
+	<div
+		class='error_tooltip'
+		:class='{"error_tooltip--show": error }'
+	>
+		{{error}}
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'ErrorTooltip',
+		props: ['error'],
+		data () {
+			return {
+				active: false
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
+	.error_tooltip {
+		position: absolute;
+		background-color: #ffeff1;
+		border: 0.125rem solid #D32F2F;
+		font-size: 0.9rem;
+		padding: 0.1rem 0.25rem;
+		top: 0.2125rem;
+		left: calc(100% + 0.25rem);
+		white-space: nowrap;
+		
+
+		&:first-letter{ text-transform: capitalize; }
+
+		opacity: 0;
+		pointer-events: none;
+		margin-top: -1rem;
+		transition: opacity 0.2s, margin-top 0.2s;
+
+		@at-root #{&}--show {
+			opacity: 1;
+			pointer-events: all;
+			margin-top: 0;
+			transition: opacity 0.2s, margin-top 0.2s;
+		}
+
+		&::after {
+			content: '';
+			position: relative;
+			width: 0;
+			height: 0;
+			display: inline-block;
+			right: calc(100% + 0.3rem);
+			border-top: 0.3rem solid transparent;
+			border-bottom: 0.3rem solid transparent;
+			border-right: 0.3rem solid #D32F2F;
+		}
+	}
+</style>

src/components/FancyInput.vue

@@ -1,11 +1,6 @@
 <template>
 	<div class='fancy_input'>
-		<div
-			class='fancy_input__error'
-			:class='{"fancy_input__error--show": error }'
-		>
-			{{error}}
-		</div>
+		<error-tooltip :error='error'></error-tooltip>
 		<div
 			class='fancy_input__placeholder'
 			:class='{"fancy_input__placeholder--active": active || value.length}'
@@ -25,9 +20,14 @@
 </template>
 
 <script>
+	import ErrorTooltip from './ErrorTooltip'
+
 	export default {
 		name: 'FancyInput',
 		props: ['value', 'placeholder', 'width', 'type', 'error'],
+		components: {
+			ErrorTooltip
+		},
 		data () {
 			return {
 				active: false
@@ -70,43 +70,5 @@
 				transition: top 0.2s, font-size 0.2s;
 			}
 		}
-
-		@at-root #{&}__error {
-			position: absolute;
-			background-color: #ffeff1;
-			border: 0.125rem solid #D32F2F;
-			font-size: 0.9rem;
-			padding: 0.1rem 0.25rem;
-			top: 0.2125rem;
-			left: calc(100% + 0.25rem);
-			white-space: nowrap;
-			
-
-			&:first-letter{ text-transform: capitalize; }
-
-			opacity: 0;
-			pointer-events: none;
-			margin-top: -1rem;
-			transition: opacity 0.2s, margin-top 0.2s;
-
-			@at-root #{&}--show {
-				opacity: 1;
-				pointer-events: all;
-				margin-top: 0;
-				transition: opacity 0.2s, margin-top 0.2s;
-			}
-
-			&::after {
-				content: '';
-				position: relative;
-				width: 0;
-				height: 0;
-				display: inline-block;
-				right: calc(100% + 0.3rem);
-				border-top: 0.3rem solid transparent;
-				border-bottom: 0.3rem solid transparent;
-				border-right: 0.3rem solid #D32F2F;
-			}
-		}
 	}
 </style>

src/components/FancyTextarea.vue

@@ -1,11 +1,6 @@
 <template>
 	<div class='fancy_textarea'>
-		<div
-			class='fancy_textarea__error'
-			:class='{"fancy_textarea__error--show": error}'
-		>
-			{{error}}
-		</div>
+		<error-tooltip :error='error'></error-tooltip>
 		<div
 			class='fancy_textarea__placeholder'
 			:class='{"fancy_textarea__placeholder--active": active || value.length}'
@@ -25,9 +20,14 @@
 </template>
 
 <script>
+	import ErrorTooltip from './ErrorTooltip'
+
 	export default {
 		name: 'FancyTextarea',
 		props: ['value', 'placeholder', 'width', 'error'],
+		components: {
+			ErrorTooltip
+		},
 		data () {
 			return {
 				active: false

src/components/InputEditor.vue

@@ -7,12 +7,7 @@
 			"input_editor--hidden": !show
 		}'
 	>
-		<div
-			class='input_editor__error'
-			:class='{"input_editor__error--show": error }'
-		>
-			{{error}}
-		</div>
+		<error-tooltip :error='error'></error-tooltip>
 		<div class='input_editor__reply_username' v-if='replyUsername'>Replying to <strong>{{replyUsername}}</strong></div>
 		<div class='input_editor__close input_editor__format_button' @click='closeEditor' v-if='!hideClose'>&times;</div>
 		<tab-view :tabs='["Editor", "Preview"]' v-model='showTab' small-tabs='true'>
@@ -73,6 +68,7 @@
 	import ModalWindow from './ModalWindow'
 	import FancyInput from './FancyInput'
 	import TabView from './TabView'
+	import ErrorTooltip from './ErrorTooltip'
 
 	import Marked from 'marked'
 
@@ -82,7 +78,8 @@
 		components: {
 			ModalWindow,
 			FancyInput,
-			TabView
+			TabView,
+			ErrorTooltip
 		},
 		data () {
 			return {