diff --git a/src/admin/components/elements/Button/index.scss b/src/admin/components/elements/Button/index.scss
index 4acd9ae871..5662fb3a27 100644
--- a/src/admin/components/elements/Button/index.scss
+++ b/src/admin/components/elements/Button/index.scss
@@ -22,22 +22,6 @@
 
   &--has-tooltip {
     position: relative;
-
-  }
-
-  .btn__tooltip {
-    opacity: 0;
-    visibility: hidden;
-    transform: translate(-50%, -10px);
-  }
-
-  .btn__content {
-    &:hover {
-      .btn__tooltip {
-        opacity: 1;
-        visibility: visible;
-      }
-    }
   }
 
   &--icon-style-without-border {
diff --git a/src/admin/components/elements/Button/index.tsx b/src/admin/components/elements/Button/index.tsx
index 2f9a89963f..5fb02e76f6 100644
--- a/src/admin/components/elements/Button/index.tsx
+++ b/src/admin/components/elements/Button/index.tsx
@@ -1,4 +1,4 @@
-import React, { isValidElement } from 'react';
+import React, { Fragment, isValidElement } from 'react';
 import { Link } from 'react-router-dom';
 import { Props } from './types';
 
@@ -21,31 +21,31 @@ const icons = {
 
 const baseClass = 'btn';
 
-const ButtonContents = ({ children, icon, tooltip }) => {
+const ButtonContents = ({ children, icon, tooltip, showTooltip }) => {
   const BuiltInIcon = icons[icon];
 
   return (
-    <span
-      className={`${baseClass}__content`}
-    >
+    <Fragment>
       <Tooltip
         className={`${baseClass}__tooltip`}
-        show={tooltip}
+        show={showTooltip}
       >
         {tooltip}
       </Tooltip>
-      {children && (
-        <span className={`${baseClass}__label`}>
-          {children}
-        </span>
-      )}
-      {icon && (
-        <span className={`${baseClass}__icon`}>
-          {isValidElement(icon) && icon}
-          {BuiltInIcon && <BuiltInIcon />}
-        </span>
-      )}
-    </span>
+      <span className={`${baseClass}__content`}>
+        {children && (
+          <span className={`${baseClass}__label`}>
+            {children}
+          </span>
+        )}
+        {icon && (
+          <span className={`${baseClass}__icon`}>
+            {isValidElement(icon) && icon}
+            {BuiltInIcon && <BuiltInIcon />}
+          </span>
+        )}
+      </span>
+    </Fragment>
   );
 };
 
@@ -70,6 +70,8 @@ const Button: React.FC<Props> = (props) => {
     tooltip,
   } = props;
 
+  const [showTooltip, setShowTooltip] = React.useState(false);
+
   const classes = [
     baseClass,
     className && className,
@@ -85,6 +87,7 @@ const Button: React.FC<Props> = (props) => {
   ].filter(Boolean).join(' ');
 
   function handleClick(event) {
+    setShowTooltip(false);
     if (type !== 'submit' && onClick) event.preventDefault();
     if (onClick) onClick(event);
   }
@@ -94,6 +97,8 @@ const Button: React.FC<Props> = (props) => {
     type,
     className: classes,
     disabled,
+    onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,
+    onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,
     onClick: !disabled ? handleClick : undefined,
     rel: newTab ? 'noopener noreferrer' : undefined,
     target: newTab ? '_blank' : undefined,
@@ -109,6 +114,7 @@ const Button: React.FC<Props> = (props) => {
           <ButtonContents
             icon={icon}
             tooltip={tooltip}
+            showTooltip={showTooltip}
           >
             {children}
           </ButtonContents>
@@ -124,6 +130,7 @@ const Button: React.FC<Props> = (props) => {
           <ButtonContents
             icon={icon}
             tooltip={tooltip}
+            showTooltip={showTooltip}
           >
             {children}
           </ButtonContents>
@@ -141,6 +148,7 @@ const Button: React.FC<Props> = (props) => {
           <ButtonContents
             icon={icon}
             tooltip={tooltip}
+            showTooltip={showTooltip}
           >
             {children}
           </ButtonContents>
diff --git a/src/admin/components/elements/CopyToClipboard/index.scss b/src/admin/components/elements/CopyToClipboard/index.scss
index 3adcc1d55b..227dd59722 100644
--- a/src/admin/components/elements/CopyToClipboard/index.scss
+++ b/src/admin/components/elements/CopyToClipboard/index.scss
@@ -14,22 +14,8 @@
     width: 0px;
   }
 
-  .tooltip {
-    pointer-events: none;
-    opacity: 0;
-    visibility: hidden;
-  }
-
   &:focus,
   &:active {
     outline: none;
   }
-
-  &:hover {
-    .tooltip {
-      opacity: 1;
-      visibility: visible;
-
-    }
-  }
 }
diff --git a/src/admin/components/elements/CopyToClipboard/index.tsx b/src/admin/components/elements/CopyToClipboard/index.tsx
index 85e210e75b..e108412222 100644
--- a/src/admin/components/elements/CopyToClipboard/index.tsx
+++ b/src/admin/components/elements/CopyToClipboard/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import Copy from '../../icons/Copy';
 import Tooltip from '../Tooltip';
@@ -18,14 +18,6 @@ const CopyToClipboard: React.FC<Props> = ({
   const [hovered, setHovered] = useState(false);
   const { t } = useTranslation('general');
 
-  useEffect(() => {
-    if (copied && !hovered) {
-      setTimeout(() => {
-        setCopied(false);
-      }, 1500);
-    }
-  }, [copied, hovered]);
-
   if (value) {
     return (
       <button
@@ -44,13 +36,15 @@ const CopyToClipboard: React.FC<Props> = ({
             ref.current.select();
             ref.current.setSelectionRange(0, value.length + 1);
             document.execCommand('copy');
-
             setCopied(true);
           }
         }}
       >
         <Copy />
-        <Tooltip>
+        <Tooltip
+          show={hovered || copied}
+          delay={copied ? 0 : undefined}
+        >
           {copied && (successMessage ?? t('copied'))}
           {!copied && (defaultMessage ?? t('copy'))}
         </Tooltip>
diff --git a/src/admin/components/elements/ReactSelect/MultiValueRemove/index.tsx b/src/admin/components/elements/ReactSelect/MultiValueRemove/index.tsx
index f017959e8c..873f011b94 100644
--- a/src/admin/components/elements/ReactSelect/MultiValueRemove/index.tsx
+++ b/src/admin/components/elements/ReactSelect/MultiValueRemove/index.tsx
@@ -30,7 +30,6 @@ export const MultiValueRemove: React.FC<MultiValueRemoveProps<OptionType>> = (pr
       <Tooltip
         className={`${baseClass}__tooltip`}
         show={showTooltip}
-        delay={350}
       >
         {t('remove')}
       </Tooltip>
diff --git a/src/admin/components/elements/Tooltip/index.scss b/src/admin/components/elements/Tooltip/index.scss
index 161fdc4b24..8187bc990d 100644
--- a/src/admin/components/elements/Tooltip/index.scss
+++ b/src/admin/components/elements/Tooltip/index.scss
@@ -1,5 +1,7 @@
 @import '../../../scss/styles.scss';
 
+$caretSize: 6;
+
 .tooltip {
   opacity: 0;
 	background-color: var(--theme-elevation-800);
@@ -7,27 +9,33 @@
 	z-index: 2;
 	bottom: 100%;
 	left: 50%;
-	transform: translate3d(-50%, -20%, 0);
+	transform: translate3d(-50%, calc(#{$caretSize}px * -1), 0);
 	padding: base(.2) base(.4);
 	color: var(--theme-elevation-0);
 	line-height: base(.75);
 	font-weight: normal;
 	white-space: nowrap;
 	border-radius: 2px;
-  transition: opacity .2s ease-in-out;
+  visibility: hidden;
 
-	span {
-		position: absolute;
-		transform: translateX(-50%);
-		top: calc(100% - #{base(.0625)});
-		left: 50%;
-		height: 0;
-		width: 0;
-		border: 10px solid transparent;
-		border-top-color: var(--theme-elevation-800);
-	}
+  &::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate3d(-50%, 100%, 0);
+    width: 0;
+    height: 0;
+    border-left: #{$caretSize}px solid transparent;
+    border-right: #{$caretSize}px solid transparent;
+    border-top: #{$caretSize}px solid var(--theme-elevation-800);
+  }
 
   &--show {
+    visibility: visible;
     opacity: 1;
+    transition: opacity .2s ease-in-out;
+    cursor: default;
   }
 }
diff --git a/src/admin/components/elements/Tooltip/index.tsx b/src/admin/components/elements/Tooltip/index.tsx
index ecc00d6305..3df38483fd 100644
--- a/src/admin/components/elements/Tooltip/index.tsx
+++ b/src/admin/components/elements/Tooltip/index.tsx
@@ -8,7 +8,7 @@ const Tooltip: React.FC<Props> = (props) => {
     className,
     children,
     show: showFromProps = true,
-    delay,
+    delay = 350,
   } = props;
 
   const [show, setShow] = React.useState(showFromProps);
@@ -16,7 +16,7 @@ const Tooltip: React.FC<Props> = (props) => {
   useEffect(() => {
     let timerId: NodeJS.Timeout;
 
-    // do not use the delay on out
+    // do not use the delay on transition-out
     if (delay && showFromProps) {
       timerId = setTimeout(() => {
         setShow(showFromProps);
@@ -39,7 +39,6 @@ const Tooltip: React.FC<Props> = (props) => {
       ].filter(Boolean).join(' ')}
     >
       {children}
-      <span />
     </aside>
   );
 };
diff --git a/src/admin/components/forms/Error/index.tsx b/src/admin/components/forms/Error/index.tsx
index d12a2d2d58..ea6e67b86e 100644
--- a/src/admin/components/forms/Error/index.tsx
+++ b/src/admin/components/forms/Error/index.tsx
@@ -14,7 +14,10 @@ const Error: React.FC<Props> = (props) => {
 
   if (showError) {
     return (
-      <Tooltip className={baseClass}>
+      <Tooltip
+        className={baseClass}
+        delay={0}
+      >
         {message}
       </Tooltip>
     );
diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
index 1f65125643..c645071cc6 100644
--- a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
@@ -105,11 +105,11 @@ export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, val
               className={`${baseClass}__add-button`}
               onMouseEnter={() => setShowTooltip(true)}
               onMouseLeave={() => setShowTooltip(false)}
+              onClick={() => setShowTooltip(false)}
             >
               <Tooltip
                 className={`${baseClass}__tooltip`}
                 show={showTooltip}
-                delay={350}
               >
                 {t('addNewLabel', { label: relatedCollections[0].labels.singular })}
               </Tooltip>
diff --git a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx
index 0c932f9c6e..3e5f10b8f2 100644
--- a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx
@@ -60,7 +60,6 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
             <Tooltip
               className={`${baseClass}__tooltip`}
               show={showTooltip}
-              delay={350}
             >
               {t('editLabel', { label: '' })}
             </Tooltip>
diff --git a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx
index 73185b672c..3cd3fbf8f3 100644
--- a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx
@@ -57,7 +57,6 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
                 <Tooltip
                   className={`${baseClass}__tooltip`}
                   show={showTooltip}
-                  delay={350}
                 >
                   {t('editLabel', { label: '' })}
                 </Tooltip>