diff --git a/media/css/seahub.css b/media/css/seahub.css
index 5b0fe3a788..6ddd2717ec 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -18,7 +18,7 @@
  */
 /*
  * z-index:
- *    popover:  20
+ *    sf-popover:  20
  *
  */
 
@@ -1167,11 +1167,11 @@ textarea:-moz-placeholder {/* for FF */
     color:#fff;
     text-decoration:none;
 }
-/**** popover ****/ /* e.g. top notice popup, group members popup */
-.popover-container {
+/**** sf-popover ****/ /* e.g. top notice popup, group members popup */
+.sf-popover-container {
     position:relative;
 }
-.popover {
+.sf-popover {
     width:240px;
     background:#fff;
     border:1px solid #c9c9c9;
@@ -1180,25 +1180,25 @@ textarea:-moz-placeholder {/* for FF */
     position:absolute;
     z-index: 20;
 }
-.popover-hd {
+.sf-popover-hd {
     padding:5px 0 3px;
     border-bottom:1px solid #dfdfe1;
     margin:0 10px;
 }
-.popover-title {
+.sf-popover-title {
     text-align:center;
     margin:0;
 }
-.popover-close {
+.sf-popover-close {
     font-size:16px;
     color:#b9b9b9;
     margin:4px 0 0;
 }
-.popover-con {
+.sf-popover-con {
     padding:0 10px;
     overflow:auto;
 }
-a.popover-item {
+a.sf-popover-item {
     display:block;
     color:#444;
     font-weight:normal;
@@ -1524,7 +1524,7 @@ button.sf-dropdown-toggle:focus {
     top:-10px;
     left:200px;
 }
-.account-popup .popover-con {
+.account-popup .sf-popover-con {
     padding:0;
 }
 .account-popup .item {
@@ -3333,7 +3333,7 @@ img.thumbnail {
 #group-discussions .outer-caret {
     right:30px;
 }
-#group-discussions .popover-con {
+#group-discussions .sf-popover-con {
     padding:0 0;
 }
 /****** grid view *****/
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 49b6965f49..4f28c095d3 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -51,9 +51,9 @@
                     <a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
                         {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
                     </a>
-                    <div id="user-info-popup" class="account-popup popover hide">
+                    <div id="user-info-popup" class="account-popup sf-popover hide">
                         <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-                        <div class="popover-con">
+                        <div class="sf-popover-con">
                             <div class="item ovhd">
                                 {% avatar request.user 36 %}
                                 <div class="txt">
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index ab840eafaf..e6fd20a5cb 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -1005,37 +1005,37 @@
 <script type="text/template" id="group-settings-content-tmpl">
 <% if (is_owner) { %>
     <ul class="group-setting-list">
-        <li><a href="#" class="group-setting-item popover-item" data-op="rename">{% trans "Rename" %}</a></li>
-        <li><a href="#" class="group-setting-item popover-item" data-op="transfer">{% trans "Transfer" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="rename">{% trans "Rename" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="transfer">{% trans "Transfer" %}</a></li>
         <% if (!wiki_enabled) { %>
-        <li><a href="#" class="group-setting-item popover-item" data-op="add-wiki">{% trans "Add Wiki" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="add-wiki">{% trans "Add Wiki" %}</a></li>
         <% } else { %>
-        <li><a href="#" class="group-setting-item popover-item" data-op="remove-wiki">{% trans "Remove Wiki" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="remove-wiki">{% trans "Remove Wiki" %}</a></li>
         <% } %>
     </ul>
     <ul class="group-setting-list">
-        <li><a href="#" class="group-setting-item popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
-        <li><a href="#" class="group-setting-item popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
     </ul>
     <ul class="last-group-setting-list">
-        <li><a href="#" class="group-setting-item popover-item" data-op="dismiss">{% trans "Dismiss" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="dismiss">{% trans "Dismiss" %}</a></li>
     </ul>
 <% } else if (is_admin) { %>
     <ul class="group-setting-list">
-        <li><a href="#" class="group-setting-item popover-item" data-op="rename">{% trans "Rename" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="rename">{% trans "Rename" %}</a></li>
         <% if (!wiki_enabled) { %>
-        <li><a href="#" class="group-setting-item popover-item" data-op="add-wiki">{% trans "Add Wiki" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="add-wiki">{% trans "Add Wiki" %}</a></li>
         <% } else { %>
-        <li><a href="#" class="group-setting-item popover-item" data-op="remove-wiki">{% trans "Remove Wiki" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="remove-wiki">{% trans "Remove Wiki" %}</a></li>
         <% } %>
     </ul>
     <ul class="last-group-setting-list">
-        <li><a href="#" class="group-setting-item popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
-        <li><a href="#" class="group-setting-item popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
     </ul>
 <% } else { %>
     <ul class="last-group-setting-list">
-        <li><a href="#" class="group-setting-item popover-item" data-op="leave">{% trans "Leave group" %}</a></li>
+        <li><a href="#" class="group-setting-item sf-popover-item" data-op="leave">{% trans "Leave group" %}</a></li>
     </ul>
 <% } %>
 </script>
@@ -1421,11 +1421,11 @@
 
 <script type="text/template" id="notice-popover-tmpl">
     <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-    <div class="popover-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
-        <h3 class="popover-title">{% trans "Notifications" %}</h3>
+    <div class="sf-popover-hd ovhd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close close sf2-icon-x1 op-icon fright"></a>
+        <h3 class="sf-popover-title">{% trans "Notifications" %}</h3>
     </div>
-    <div class="popover-con">
+    <div class="sf-popover-con">
         <div class="loading-icon loading-tip"></div>
         <p class="error alc hide"></p>
         <ul class="hide notice-list"></ul>
@@ -1435,7 +1435,7 @@
 
 <script type="text/template" id="user-info-popup-tmpl">
     <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-    <div class="popover-con">
+    <div class="sf-popover-con">
         <div class="item ovhd">
             {% avatar request.user 36 %}
             <div class="txt">
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
index 9bd232da5d..e6def516fe 100644
--- a/seahub/templates/libraries.html
+++ b/seahub/templates/libraries.html
@@ -115,21 +115,21 @@
 
 <script type="text/template" id="group-settings-tmpl">
     <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-    <div class="popover-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
-        <h3 class="popover-title">{% trans "Settings" %}</h3>
+    <div class="sf-popover-hd ovhd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close close sf2-icon-x1 op-icon fright"></a>
+        <h3 class="sf-popover-title">{% trans "Settings" %}</h3>
     </div>
-    <div class="popover-con">
+    <div class="sf-popover-con">
     </div>
 </script>
 
 <script type="text/template" id="group-members-tmpl">
     <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-    <div class="popover-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
-        <h3 class="popover-title">{% trans "Members" %}</h3>
+    <div class="sf-popover-hd ovhd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close close sf2-icon-x1 op-icon fright"></a>
+        <h3 class="sf-popover-title">{% trans "Members" %}</h3>
     </div>
-    <div class="popover-con">
+    <div class="sf-popover-con">
         <div class="loading-icon loading-tip"></div>
         <ul id="group-member-list" class="hide"></ul>
         <p class="error hide"></p>
@@ -138,18 +138,18 @@
 
 <script type="text/template" id="group-discussions-tmpl">
     <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-    <div class="popover-hd ovhd">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
-        <h3 class="popover-title">{% trans "Discussions" %}</h3>
+    <div class="sf-popover-hd ovhd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close close sf2-icon-x1 op-icon fright"></a>
+        <h3 class="sf-popover-title">{% trans "Discussions" %}</h3>
     </div>
-    <div class="popover-con">
+    <div class="sf-popover-con">
         <div class="loading-icon loading-tip"></div>
         <p class="load-more-discussion hide js-load-more">{% trans "More..." %}</p>
         <ul id="group-discussion-list" class="hide"></ul>
         <p class="no-discussion-tip hide">{% trans "No discussion in this group yet." %}</p>
         <p class="error hide"></p>
     </div>
-    <div class="popover-footer">
+    <div class="sf-popover-footer">
         <form action="" method="post" class="msg-form">
             <img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
             <div class="msg-body">
diff --git a/static/scripts/app/views/account.js b/static/scripts/app/views/account.js
index 6bbc7d82b5..03459dc664 100644
--- a/static/scripts/app/views/account.js
+++ b/static/scripts/app/views/account.js
@@ -9,7 +9,7 @@ define([
 
     var View = PopoverView.extend({
         id: 'user-info-popup',
-        className: 'popover account-popup',
+        className: 'sf-popover account-popup',
 
         template:  _.template($('#user-info-popup-tmpl').html()),
 
diff --git a/static/scripts/app/views/group-discussions.js b/static/scripts/app/views/group-discussions.js
index d0738297b7..e99372ac91 100644
--- a/static/scripts/app/views/group-discussions.js
+++ b/static/scripts/app/views/group-discussions.js
@@ -11,7 +11,7 @@ define([
 
     var View = PopoverView.extend({
         id: 'group-discussions',
-        className: 'popover',
+        className: 'sf-popover',
 
         template:  _.template($('#group-discussions-tmpl').html()),
 
@@ -120,12 +120,12 @@ define([
             app.router.navigate('group/' + this.groupView.group.id + '/discussions/');
         },
 
-        // set max-height for '.popover-con'
+        // set max-height for '.sf-popover-con'
         setConMaxHeight: function() {
-            this.$('.popover-con').css({
+            this.$('.sf-popover-con').css({
                 'max-height': $(window).height() - this.$el.offset().top
-                    - this.$('.popover-hd').outerHeight(true)
-                    - this.$('.popover-footer').outerHeight(true)
+                    - this.$('.sf-popover-hd').outerHeight(true)
+                    - this.$('.sf-popover-footer').outerHeight(true)
                     - 2 // 2: top, bottom border width of $el,
                     - 10 // 10: leave some margin at the bottom
             });
@@ -164,7 +164,7 @@ define([
                         sumHeight += $(this).outerHeight(true);
                     });
                     // scroll
-                    _this.$('.popover-con').scrollTop(sumHeight - 50); // 50: keep at least 50px gap from the top
+                    _this.$('.sf-popover-con').scrollTop(sumHeight - 50); // 50: keep at least 50px gap from the top
                 },
                 error: function(collection, response, opts) {
                     var err_msg;
@@ -227,9 +227,9 @@ define([
             return false;
         },
 
-        // scroll '.popover-con' to the bottom
+        // scroll '.sf-popover-con' to the bottom
         scrollConToBottom: function() {
-            var $el = this.$('.popover-con');
+            var $el = this.$('.sf-popover-con');
             $el.scrollTop($el[0].scrollHeight - $el[0].clientHeight);
         }
 
diff --git a/static/scripts/app/views/group-members.js b/static/scripts/app/views/group-members.js
index 600934fffd..6406e58a55 100644
--- a/static/scripts/app/views/group-members.js
+++ b/static/scripts/app/views/group-members.js
@@ -11,7 +11,7 @@ define([
 
     var View = PopoverView.extend({
         id: 'group-members',
-        className: 'popover',
+        className: 'sf-popover',
 
         template:  _.template($('#group-members-tmpl').html()),
 
diff --git a/static/scripts/app/views/group-settings.js b/static/scripts/app/views/group-settings.js
index fd32363ef9..2043f7f9d1 100644
--- a/static/scripts/app/views/group-settings.js
+++ b/static/scripts/app/views/group-settings.js
@@ -10,7 +10,7 @@ define([
 
     var View = PopoverView.extend({
         id: 'group-settings',
-        className: 'popover',
+        className: 'sf-popover',
 
         template:  _.template($('#group-settings-tmpl').html()),
         contentTemplate: _.template($('#group-settings-content-tmpl').html()),
@@ -36,7 +36,7 @@ define([
         },
 
         showContent: function() {
-            this.$listContainer = this.$('.popover-con');
+            this.$listContainer = this.$('.sf-popover-con');
 
             // the user's role in this group
             this.is_owner = false;
diff --git a/static/scripts/app/views/notifications.js b/static/scripts/app/views/notifications.js
index 0be31476a3..3e58766739 100644
--- a/static/scripts/app/views/notifications.js
+++ b/static/scripts/app/views/notifications.js
@@ -9,7 +9,7 @@ define([
 
     var View = PopoverView.extend({
         id: 'notice-popover',
-        className: 'popover',
+        className: 'sf-popover',
 
         template:  _.template($('#notice-popover-tmpl').html()),
 
diff --git a/static/scripts/app/views/widgets/popover.js b/static/scripts/app/views/widgets/popover.js
index 00f9949c66..2d97046839 100644
--- a/static/scripts/app/views/widgets/popover.js
+++ b/static/scripts/app/views/widgets/popover.js
@@ -10,7 +10,7 @@ define([
      * Popover View.
     */
 
-    // There can be only one visible popover view
+    // There can be only one visible sf-popover view
     $(document).click(function(e) {
         var view = app.ui.currentPopover;
         var target = e.target || event.srcElement;
@@ -51,9 +51,9 @@ define([
             this.$el.on('click', '.close', _.bind(this.hide, this));
         },
 
-        // set max-height for '.popover-con'
+        // set max-height for '.sf-popover-con'
         setConMaxHeight: function() {
-            this.$('.popover-con').css({'max-height': $(window).height() - this.$el.offset().top - this.$('.popover-hd').outerHeight(true) - 2}); // 2: top, bottom border width of $el
+            this.$('.sf-popover-con').css({'max-height': $(window).height() - this.$el.offset().top - this.$('.sf-popover-hd').outerHeight(true) - 2}); // 2: top, bottom border width of $el
         },
 
         hide: function() {