feat: tooltip and popover components

components/realtime/Socketio.vue

@@ -100,7 +100,8 @@
         <div v-if="index + 1 !== communication.inputs.length">
           <li>
             <button
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
               class="icon button"
               @click="removeCommunicationInput({ index })"
             >

components/realtime/Websocket.vue

@@ -67,7 +67,8 @@
         <div>
           <li>
             <button
-              v-tooltip.bottom="{
+              v-tippy="{ theme: 'tooltip' }"
+              title="{
                 content: protocol.hasOwnProperty('active')
                   ? protocol.active
                     ? $t('turn_off')
@@ -96,7 +97,8 @@
         <div>
           <li>
             <button
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
               class="icon button"
               @click="deleteProtocol({ index })"
             >