diff --git a/frontend/src/components/main-side-nav-folded.js b/frontend/src/components/main-side-nav-folded.js
index 7cfb659e80..12fc0fec18 100644
--- a/frontend/src/components/main-side-nav-folded.js
+++ b/frontend/src/components/main-side-nav-folded.js
@@ -39,12 +39,12 @@ class MainSideNavFolded extends React.Component {
         <div className={'side-nav-con d-flex flex-column'}>
           <ul className="nav nav-pills flex-column nav-container">
 
-            <li id="files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
+            <li id="main-side-nav-folded-files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
               <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
                 <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
               </Link>
             </li>
-            <Tip target="files" text={gettext('Files')} />
+            <Tip target="main-side-nav-folded-files" text={gettext('Files')} />
 
             <li className={`nav-item ${this.getActiveClass('starred')}`} id="main-side-nav-folded-starred">
               <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}>
diff --git a/frontend/src/css/side-nav-icon-tip.css b/frontend/src/css/side-nav-icon-tip.css
index 8fad4fb478..78d8502c40 100644
--- a/frontend/src/css/side-nav-icon-tip.css
+++ b/frontend/src/css/side-nav-icon-tip.css
@@ -1,10 +1,10 @@
 .side-nav-icon-tip {
   opacity: 0;
-  transform: translateX(0px);
+  transform: translateX(-20px);
   transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
 }
 
 .side-nav-icon-tip.side-nav-icon-tip-animation {
   opacity: 1;
-  transform: translateX(20px);
+  transform: translateX(0px);
 }