diff --git a/apps/remix-ide/src/app/tabs/compile-tab.js b/apps/remix-ide/src/app/tabs/compile-tab.js
index 775b251872..0b73843de7 100644
--- a/apps/remix-ide/src/app/tabs/compile-tab.js
+++ b/apps/remix-ide/src/app/tabs/compile-tab.js
@@ -11,7 +11,7 @@ import { compile } from '@remix-project/remix-solidity'
 const EventEmitter = require('events')
 const $ = require('jquery')
 const yo = require('yo-yo')
-const copy = require('copy-text-to-clipboard')
+const copy = require('copy-to-clipboard')
 var QueryParams = require('../../lib/query-params')
 const modalDialogCustom = require('../ui/modal-dialog-custom')
 const parseContracts = require('./compileTab/contractParser')
diff --git a/apps/remix-ide/src/app/ui/copy-to-clipboard.js b/apps/remix-ide/src/app/ui/copy-to-clipboard.js
index 9974cc5782..26c96b0d2f 100644
--- a/apps/remix-ide/src/app/ui/copy-to-clipboard.js
+++ b/apps/remix-ide/src/app/ui/copy-to-clipboard.js
@@ -1,6 +1,6 @@
 var yo = require('yo-yo')
 // -------------- copyToClipboard ----------------------
-const copy = require('copy-text-to-clipboard')
+const copy = require('copy-to-clipboard')
 var addTooltip = require('./tooltip')
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
diff --git a/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx b/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
index fbfdc6dfba..1f1a54d946 100644
--- a/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
+++ b/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
@@ -1,27 +1,26 @@
 import React, { useState } from 'react'
-import copy from 'copy-text-to-clipboard'
+import copy from 'copy-to-clipboard'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 import './copy-to-clipboard.css'
 
-export const CopyToClipboard = ({ content, tip='Copy', icon='fa-copy', ...otherProps }) => {
+export const CopyToClipboard = ({ content, tip = 'Copy', icon = 'fa-copy', direction = 'right', ...otherProps }) => {
   const [message, setMessage] = useState(tip)
-
-  const handleClick = (event) => {
+  const handleClick = (e) => {
     if (content && content !== '') { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
       try {
         if (typeof content !== 'string') {
           content = JSON.stringify(content, null, '\t')
         }
+        copy(content)
+        setMessage('Copied')
       } catch (e) {
         console.error(e)
       }
-      copy(content)
-      setMessage('Copied')
     } else {
       setMessage('Cannot copy empty content!')
     }
-    event.preventDefault()
+    e.preventDefault()
     return false
   }
 
diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
index 7bebc389d8..75342f0556 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
@@ -165,7 +165,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     const log = <div className="remixui_detailsJSON">
       {
         Object.keys(contractProperties).map((propertyName, index) => {
-          const copyDetails = <span className="remixui_copyDetails"><CopyToClipboard content={contractProperties[propertyName]} /></span>
+          const copyDetails = <span className="remixui_copyDetails"><CopyToClipboard content={contractProperties[propertyName]} direction='top' /></span>
           const questionMark = <span className="remixui_questionMark"><i title={ help[propertyName] } className="fas fa-question-circle" aria-hidden="true"></i></span>
         
           return (<div className="remixui_log" key={index}>
diff --git a/package-lock.json b/package-lock.json
index d64633e8c9..d5f2e4d0ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13241,11 +13241,14 @@
         "is-plain-object": "^2.0.1"
       }
     },
-    "copy-text-to-clipboard": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-1.0.4.tgz",
-      "integrity": "sha512-4hDE+0bgqm4G/nXnt91CP3rc0vOptaePPU5WfVZuhv2AYNJogdLHR4pF1XPgXDAGY4QCzj9pD7zKATa+50sQPg==",
-      "dev": true
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "dev": true,
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
     },
     "copy-webpack-plugin": {
       "version": "5.1.1",
@@ -37174,6 +37177,12 @@
         "through2": "^2.0.3"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
+      "dev": true
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
diff --git a/package.json b/package.json
index 25151f7882..9d0ff5be06 100644
--- a/package.json
+++ b/package.json
@@ -233,7 +233,7 @@
     "browserify": "^16.2.3",
     "browserify-reload": "^1.0.3",
     "component-type": "^1.2.1",
-    "copy-text-to-clipboard": "^1.0.4",
+    "copy-to-clipboard": "^3.3.1",
     "csjs-inject": "^1.0.1",
     "csslint": "^1.0.2",
     "cypress": "^4.1.0",