added the Tooltip to the botton in ProofStepDialog.vue for a better user interface

src/App.vue

@@ -3,15 +3,18 @@
     <el-aside width="300px">
       <el-card>
         <h3>Input Guide</h3>
-        <p>Not: !   And: &</p>
-        <p>Or: ||   Imply: -></p>
+        <p>Not: ! And: &</p>
+        <p>Or: || Imply: -></p>
         <p>Brackets: ()</p>
         <p>Turnstile: |-</p>
         <p>True: true</p>
         <p>False: false</p>
         <p>Symbol: one uppercase/lowercase letter</p>
-        <p>Attention: this logic assistant deletes meaningless brackets, imply is right-associative, and/or is
-          left-associative</p>
+        <p><strong>Note:</strong> This logic assistant only displays meaningful brackets.</p>
+        <ul>
+          <li><strong>imply</strong> is right-associative.</li>
+          <li><strong>and</strong> and <strong>or</strong> are left-associative.</li>
+        </ul>
       </el-card>
     </el-aside>
     <el-container>

src/components/ProofStepDialog.vue

@@ -23,21 +23,28 @@
           <el-input v-model="currentExpression"></el-input>
           <el-button @click="submitExpression">Next</el-button>
           <el-button @click="submitExpression">Submit</el-button>
-          <el-button @click="cleanExpressions">Clean</el-button>
+          <el-tooltip class="box-item" effect="dark" content="Clean all previous input expressions"
+            placement="bottom-end">
+            <el-button @click="cleanExpressions">Clean</el-button>
+          </el-tooltip>
         </el-form-item>
       </template>
       <el-form-item label="Answer">
         <el-input v-model="currentAnswer"></el-input>
         <el-button @click="submitAnswer">Next</el-button>
         <el-button @click="submitAnswer">Submit</el-button>
-        <el-button @click="cleanAnswers">Clean</el-button>
+        <el-tooltip class="box-item" effect="dark" content="Clean all previous input answers" placement="bottom-end">
+          <el-button @click="cleanAnswers">Clean</el-button>
+        </el-tooltip>
         <el-alert v-if="errorMsg" title="Error" type="error" :closable="false">{{ errorMsg }}</el-alert>
         <el-alert v-if="msg" type="success" :closable="false">{{ msg }}</el-alert>
       </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="closeDialog">Cancel</el-button>
-      <el-button @click="clean">Clean</el-button>
+      <el-tooltip class="box-item" effect="dark" content="Clean all previous inputs" placement="bottom">
+        <el-button @click="clean">Restart</el-button>
+      </el-tooltip>
       <el-button type="primary" @click="validAnswers">Check</el-button>
     </template>
   </el-dialog>
@@ -280,4 +287,13 @@ export default {
   background-color: #d7ecdc;
   color: rgb(2, 46, 2);
 }
+
+.tooltip-base-box {
+  width: 600px;
+}
+
+.tooltip-base-box .box-item {
+  width: 110px;
+  margin-top: 10px;
+}
 </style>
\ No newline at end of file