Migrate from v-tooltip to floating-vue

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

package.json

@@ -49,6 +49,7 @@
 		"debounce": "1.2.1",
 		"emoji-mart-vue-fast": "^10.2.1",
 		"escape-html": "^1.0.3",
+		"floating-vue": "^1.0.0-beta.15",
 		"hammerjs": "^2.0.8",
 		"linkify-string": "^3.0.2",
 		"md5": "^2.2.1",
@@ -58,7 +59,6 @@
 		"style-loader": "^3.3.1",
 		"tributejs": "^5.1.3",
 		"v-click-outside": "^3.0.1",
-		"v-tooltip": "^2.0.3",
 		"vue": "^2.6.14",
 		"vue-color": "^2.7.1",
 		"vue-material-design-icons": "^5.0.0",

src/components/Actions/Actions.vue

@@ -166,9 +166,9 @@ export default {
 		<!-- If more than one action, create a popovermenu -->
 		<Popover :delay="0"
 			:handle-resize="true"
-			:open.sync="opened"
+			:shown.sync="opened"
 			:placement="placement"
-			:boundaries-element="boundariesElement"
+			:boundary="boundariesElement"
 			:container="container"
 			@show="openMenu"
 			@after-show="onOpen"
@@ -518,7 +518,7 @@ export default {
 			this.$emit('update:open', true)
 
 			/**
-			 * Event emitted when the popover menu is closed
+			 * Event emitted when the popover menu is opened
 			 */
 			this.$emit('open')
 		},

src/components/EmojiPicker/EmojiPicker.vue

@@ -32,7 +32,7 @@
 	```vue
 	<template>
 		<div>
-			<EmojiPicker @select="select">
+			<EmojiPicker @select="select" style="display: inline-block">
 				<button> Click Me </button>
 			</EmojiPicker>
 			<span>selected emoji: {{ emoji }}</span>
@@ -62,7 +62,8 @@
 			<EmojiPicker
 				:close-on-select="false"
 				:show-preview="true"
-				@select="select">
+				@select="select"
+				style="display: inline-block">
 				<button> Click Me </button>
 			</EmojiPicker>
 			<span>selected emoji: {{ emoji }}</span>
@@ -87,10 +88,8 @@
 </docs>
 
 <template>
-	<Popover :open.sync="open"
+	<Popover :shown.sync="open"
 		:container="container"
-		popover-class="emoji-popover"
-		popover-inner-class="popover-emoji-picker-inner"
 		v-bind="$attrs"
 		v-on="$listeners">
 		<template #trigger>
@@ -223,22 +222,6 @@ export default {
 <style lang="scss">
 @import '~emoji-mart-vue-fast/css/emoji-mart.css';
 
-.emoji-popover {
-	& .tooltip-arrow,
-	&[x-placement^='top'] {
-		margin-left: 0 !important;
-	}
-	& .tooltip-arrow,
-	&[x-placement^='bottom'] {
-		margin-top: 0 !important;
-	}
-
-	// Remove the extra padding from VTooltip
-	.popover-emoji-picker-inner {
-		padding: 0;
-	}
-}
-
 .emoji-mart {
 	background-color: var(--color-main-background) !important;
 	border: 0;