diff --git a/src/components/SkillsList/index.jsx b/src/components/SkillsList/index.jsx
index c4cc1ae4..c3bf779c 100644
--- a/src/components/SkillsList/index.jsx
+++ b/src/components/SkillsList/index.jsx
@@ -3,7 +3,7 @@
  *
  * Shows list of skills with "N more" link which is showing tooltip with a full list of skills.
  */
-import React, { useCallback, useState, useMemo } from "react";
+import React, { useCallback, useState, useMemo, useEffect } from "react";
 import PT from "prop-types";
 import _ from "lodash";
 import "./styles.module.scss";
@@ -19,6 +19,8 @@ const SkillsList = ({ requiredSkills, skills, limit = 3 }) => {
   // if has requiredSkills, show two columns, eles show only one column
   const showMatches = !!requiredSkills;
   const [isOpen, setIsOpen] = useState(false);
+  const [isDelayClose, setIsDelayClose] = useState(false);
+  const [isPopoverEnter, setIsPopoverEnter] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
 
@@ -58,82 +60,105 @@ const SkillsList = ({ requiredSkills, skills, limit = 3 }) => {
     ],
   });
 
+  useEffect(() => {
+    if (isDelayClose) {
+      const timer = setTimeout(() => {
+        if (!isPopoverEnter) {
+          close();
+        }
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isDelayClose, isPopoverEnter, close]);
+
+  const delayClose = useCallback(() => {
+    setIsDelayClose(true);
+  }, [setIsDelayClose]);
   const close = useCallback(() => {
     setIsOpen(false);
+    setIsDelayClose(false);
+    setIsPopoverEnter(false);
   }, [setIsOpen]);
 
   const open = useCallback(() => {
     setIsOpen(true);
+    setIsDelayClose(false);
   }, [setIsOpen]);
 
   const toggle = useCallback(() => {
     setIsOpen(!isOpen);
   }, [isOpen, setIsOpen]);
 
+  const enterPopover = useCallback(() => {
+    setIsPopoverEnter(true);
+  }, [setIsPopoverEnter]);
+
   return (
-    <div styleName="skills-list">
-      {_.map(skillsToShow, "name").join(", ")}
-      {skillsToHide.length > 0 && (
+    <OutsideClickHandler onOutsideClick={close} display="inline">
+      <div
+        styleName="skills-list"
+        onClick={toggle}
+        onMouseEnter={open}
+        onMouseLeave={delayClose}
+        role="button"
+        tabIndex={0}
+        ref={setReferenceElement}
+      >
+        {_.map(skillsToShow, "name").join(", ")}
+
+        {skillsToHide.length > 0 && (
+          <>
+            {" and "}
+            <span styleName="more">{skillsToHide.length > 0} more</span>
+          </>
+        )}
         <>
-          {" and "}
-          <OutsideClickHandler onOutsideClick={close} display="inline">
-            <span
-              styleName="more"
-              onClick={toggle}
-              onMouseEnter={open}
+          {isOpen && (
+            <div
+              styleName="popover"
+              ref={setPopperElement}
+              onMouseEnter={enterPopover}
               onMouseLeave={close}
-              role="button"
-              tabIndex={0}
-              ref={setReferenceElement}
+              style={styles.popper}
+              {...attributes.popper}
             >
-              {skillsToHide.length > 0} more
-            </span>
-
-            {isOpen && (
-              <div
-                styleName="popover"
-                ref={setPopperElement}
-                style={styles.popper}
-                {...attributes.popper}
-              >
-                <div styleName="popover-content">
-                  {requiredSkills && (
-                    <div styleName="skills-section">
-                      <div styleName="skills-title">Required Job Skills</div>
-                      <ul styleName="skills-list">
-                        {!requiredSkills.length && <li>None</li>}
-                        {requiredSkills.map((skill) => (
-                          <li key={skill.id}>
-                            {_.find(skills, { id: skill.id }) ? (
-                              <IconCheck />
-                            ) : (
-                              <IconCross />
-                            )}{" "}
-                            {skill.name}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  )}
-                  {otherSkills && (
-                    <div styleName="skills-section">
-                      <div styleName="skills-title">
-                        {showMatches ? "Other User Skills" : "Required Skills"}
-                      </div>
-                      <ul styleName="skills-list">
-                        {otherSkills.map((skill) => (
-                          <li key={skill.id}>{skill.name}</li>
-                        ))}
-                      </ul>
+              <div styleName="popover-content">
+                {requiredSkills && (
+                  <div styleName="skills-section">
+                    <div styleName="skills-title">Required Job Skills</div>
+                    <ul styleName="skills-list">
+                      {!requiredSkills.length && <li>None</li>}
+                      {requiredSkills.map((skill) => (
+                        <li key={skill.id}>
+                          {_.find(skills, { id: skill.id }) ? (
+                            <IconCheck />
+                          ) : (
+                            <IconCross />
+                          )}{" "}
+                          {skill.name}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {otherSkills && (
+                  <div styleName="skills-section">
+                    <div styleName="skills-title">
+                      {showMatches ? "Other User Skills" : "Required Skills"}
                     </div>
-                  )}
-                </div>
+                    <ul styleName="skills-list">
+                      {otherSkills.map((skill) => (
+                        <li key={skill.id}>{skill.name}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
               </div>
-            )}
-          </OutsideClickHandler>
+            </div>
+          )}
         </>
-      )}
-    </div>
+      </div>
+    </OutsideClickHandler>
   );
 };