✨ Adds ability to edit pageInfo through the UI

src/components/FormElements/Button.vue

@@ -1,8 +1,11 @@
 <template>
   <button
     @click="click ? click() : () => null"
-    :disabled="disabled"
     :class="disallow ? 'disallowed': ''"
+    :type="type || 'button'"
+    :disabled="disabled"
+    v-tooltip="hoverText"
+    :title="tooltip"
   >
     <slot></slot>
     <slot name="text"></slot>
@@ -15,10 +18,21 @@
 export default {
   name: 'Button',
   props: {
-    text: String,
-    click: Function,
-    disabled: Boolean,
-    disallow: Boolean,
+    text: String, // The text to be displayed in the button
+    click: Function, // Function to call when clicked
+    disabled: Boolean, // If true, button cannot be clicked
+    disallow: Boolean, // Show not-allowed cursor when true
+    type: String, // The html button type attribute
+    tooltip: String, // Text to be displayed on hover
+  },
+  computed: {
+    /* If tooltip prop specified, then return config for v-tooltip */
+    hoverText() {
+      const content = this.tooltip;
+      const trigger = 'hover focus';
+      const delay = { show: 350, hide: 100 };
+      return (content) ? { content, trigger, delay } : undefined;
+    },
   },
 };
 </script>