Use el-tooltip

products/neo-savant/src/components/Tools/AddressConverter.vue

@@ -3,21 +3,21 @@
     <div class="form-group mb-4">
       <label class="d-flex align-items-center">
         Bech32 Address
-        <VTooltip distance="16">
-          <!-- This will be the popover target (for the events and position) -->
+        <el-tooltip placement="top">
           <a class="tooltip-target b3">
             <img src="@/assets/question.svg" />
           </a>
 
-          <!-- This will be the content of the popover -->
-          <template #popper>
-            To avoid confusion amongst users, the bech32 checksum address format shall be used in the GUI of any user-facing application built on Zilliqa in order to cearly distinguish a Zilliqa-based address (zil1) from an Ethereum-based address (0x).
+          <template #content>
+            To avoid confusion amongst users, the bech32 checksum address format<br />
+            shall be used in the GUI of any user-facing application built on Zilliqa<br />
+            in order to cearly distinguish a Zilliqa-based address (zil1) from an Ethereum-based address (0x).
             <br />For more details, please read
             <a
               href="https://github.com/Zilliqa/ZIP/blob/master/zips/zip-1.md"
             >[ZIP-1]</a>.
           </template>
-        </VTooltip>
+        </el-tooltip>
       </label>
       <input type="text" class="form-control mb-2" :value="bech32" @change="handleBech32Change" />
       <div class="text-danger text-small" v-if="bech32Error">{{ bech32Error }}</div>
@@ -26,16 +26,17 @@
     <div class="form-group">
       <label class="d-flex align-items-center">
         Base16 Address
-        <VTooltip distance="16">
-          <!-- This will be the popover target (for the events and position) -->
+        <el-tooltip placement="top">
           <a class="tooltip-target">
             <img src="@/assets/question.svg" />
           </a>
 
           <!-- This will be the content of the popover -->
-          <template #popper>
-          The Zilliqa protocol and Scilla uses base16 checksummed addresses (0x) in its global state and messages. This is the address format to be used by developers when interacting with the Zilliqa protocol.</template>
-        </VTooltip>
+          <template #content>
+          The Zilliqa protocol and Scilla uses base16 checksummed addresses (0x)<br/> 
+          in its global state and messages. This is the address format to be used by developers<br/>
+          when interacting with the Zilliqa protocol.</template>
+        </el-tooltip>
       </label>
       <input type="text" class="form-control mb-2" :value="base16" @change="handleBase16Change" />
       <div class="text-danger text-small" v-if="base16Error">{{ base16Error }}</div>