diff --git a/app/scripts/directives/setting.js b/app/scripts/directives/setting.js
index fd4e43b..3735d66 100644
--- a/app/scripts/directives/setting.js
+++ b/app/scripts/directives/setting.js
@@ -126,6 +126,12 @@
                 }, function (value) {
                     scope.optionValue = value;
                 });
+
+                scope.$watch(function () {
+                    return scope.option;
+                }, function (value) {
+                    angular.element('[data-toggle="popover"]').popover();
+                });
             }
         };
     }]);
diff --git a/app/views/setting.html b/app/views/setting.html
index ec8825f..3ce500b 100644
--- a/app/views/setting.html
+++ b/app/views/setting.html
@@ -2,8 +2,8 @@
     <div class="setting-key setting-key-without-desc col-sm-4">
         <span ng-bind="option.nameKey | translate"></span>
         <em ng-bind="'(' + option.key + ')'"></em>
-        <i class="icon-primary fa fa-question-circle" data-toggle="tooltip" data-placement="right"
-           title="{{option.descriptionKey | translate}}" ng-if="(option.descriptionKey | translate) != ''"></i>
+        <i class="icon-primary fa fa-question-circle" ng-if="(option.descriptionKey | translate) != ''"
+           data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" data-content="{{option.descriptionKey | translate}}"></i>
         <span class="description" ng-if="option.showCount && option.split && optionValue"
               ng-bind="'format.settings.total-count' | translate: {count: getTotalCount()}"></span>
     </div>