add tooltip

apps/vyper/src/app/components/CompilerButton.tsx

@@ -1,4 +1,5 @@
 import React, { Fragment, useEffect, useState } from 'react'
+import { CustomTooltip } from "@remix-ui/helper";
 import { isVyper, compile, toStandardOutput, isCompilationError, remixClient, normalizeContractPath, compileContract, RemixClient } from '../utils'
 import Button from 'react-bootstrap/Button'
 
@@ -26,21 +27,27 @@ function CompilerButton({ contract, setOutput, compilerUrl, resetCompilerState,
 
   return (
     <Fragment>
-      <button data-id="compile"
+      <CustomTooltip
-        onClick={async () => {
+      placement="auto"
-          setLoadingSpinnerState(true)
+      tooltipId="overlay-tooltip-compile"
-          await compileContract(contract, compilerUrl, setOutput, setLoadingSpinnerState)
+      tooltipText={contract}
-        }}
+    >
-        className="btn btn-primary w-100 d-block btn-block text-break remixui_disabled mb-1 mt-3"
+        <button data-id="compile"
-      >
+          onClick={async () => {
-        <div className="d-flex align-items-center justify-content-center fa-1x">
+            setLoadingSpinnerState(true)
-          <span className={ loadingSpinner ? 'fas fa-sync fa-pulse mr-1' : 'fas fa-sync mr-1'} />
+            await compileContract(contract, compilerUrl, setOutput, setLoadingSpinnerState)
-          <div className="text-truncate overflow-hidden text-nowrap">
+          }}
-            <span>Compile</span>
+          className="btn btn-primary w-100 d-block btn-block text-break remixui_disabled mb-1 mt-3"
-            <span className="ml-1 text-nowrap">{contract}</span>
+        >
+          <div className="d-flex align-items-center justify-content-center fa-1x">
+            <span className={ loadingSpinner ? 'fas fa-sync fa-pulse mr-1' : 'fas fa-sync mr-1'} />
+            <div className="text-truncate overflow-hidden text-nowrap">
+              <span>Compile</span>
+              <span className="ml-1 text-nowrap">{contract}</span>
+            </div>
           </div>
-        </div>
+        </button>
-      </button>
+      </CustomTooltip>
     </Fragment>
   )
 }