Add explanation split infinitive

src/components/Header.vue

@@ -4,16 +4,29 @@
     <span class="dict-label" tabindex="0">{{dict_label}}</span>
     <h2 class="article_header" tabindex="0">{{header_text}}</h2>
     <h2 class="secondary_header" v-if="secondary_header_text.length" tabindex="0">{{secondary_header_text}}</h2>
-      <span class="header_group_list" v-if="group_list.length" tabindex="0">{{group_list}}</span>
-      <span v-if="split_inf" tabindex="0"> (kløyvd infinitiv: <i>-a</i>
-        <v-btn depressed min-width="14px" max-width="14px" class = "help-button" x-small color="primary" target="_blank"  href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">
-        <v-icon middle x-small>$vuetify.icons.value.help</v-icon></v-btn>)</span>
-      <details :title="inflect_tooltip" @toggle="toggle()" v-if="inflected" :class="$vuetify.breakpoint.name">
-        <summary :class="dictionary" onclick="this.blur()" tabindex="0">bøying</summary>
-        <div class="inflection-canvas">
-          <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
-        </div>
-      </details>  
+    <span class="header_group_list" v-if="group_list.length" tabindex="0">{{group_list}}</span>
+
+    <span v-if="split_inf" tabindex="0"> (kløyvd infinitiv: <i>-a</i>
+      <v-menu rounded="lg" v-model="menu" offset-x max-width="200px">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn v-bind="attrs" v-on="on" depressed min-width="14px" max-width="14px" class="help-button" x-small
+            color="primary">
+            <v-icon middle x-small>$vuetify.icons.value.info</v-icon>
+          </v-btn>
+        </template>
+        <v-card class="info-card">
+          Dersom du bruker kløyvd infinitiv, skal dette verbet ha <i>-a</i> i infinitiv. Les meir
+          <a target="_blank" href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">her</a>.
+        </v-card>
+      </v-menu>
+    </span>)
+
+    <details :title="inflect_tooltip" @toggle="toggle()" v-if="inflected" :class="$vuetify.breakpoint.name">
+      <summary :class="dictionary" onclick="this.blur()" tabindex="0">bøying</summary>
+      <div class="inflection-canvas">
+        <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
+      </div>
+    </details>
   </div>
 </template>
 
@@ -87,7 +100,8 @@ export default {
   },
   data: function() {
     return {
-      inflect_reported: false
+      inflect_reported: false,
+      menu: false
     }
   },
   methods: {
@@ -124,10 +138,16 @@ article h2.secondary_header {
 
 .help-button {
   margin-left: 6px;
+  margin-right: 2px;
   margin-bottom: 12px;
   color: var(--v-primary-base);
 }
 
+.info-card {
+  padding: 12px;
+  
+}
+
 .word-classification {
   text-decoration: underline dashed;
 }

src/plugins/vuetify.js

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import Vuetify from 'vuetify/lib/framework';
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faShareAltSquare, faQuestion} from '@fortawesome/free-solid-svg-icons'
+import { faShareAltSquare, faInfo} from '@fortawesome/free-solid-svg-icons'
 import { faFacebookSquare, faTwitterSquare} from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare, faQuestion)
+library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare, faInfo)
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 Vue.use(Vuetify);
@@ -29,10 +29,10 @@ const FONTAWESOME_ICONS = {
       icon: "share-alt-square"
     }
   },
-  help: {
+  info: {
     component: FontAwesomeIcon,
     props: {
-      icon:  ["fa", "question"]
+      icon:  ["fa", "info"]
     }
   }
 }