diff --git a/modules/system/assets/ui/docs/drag-sort.md b/modules/system/assets/ui/docs/drag-sort.md
index 3ddd83bb5..f106c0787 100644
--- a/modules/system/assets/ui/docs/drag-sort.md
+++ b/modules/system/assets/ui/docs/drag-sort.md
@@ -28,7 +28,7 @@ Sort the buttons
         }
     </style>
 
-## JavaScript API:
+## JavaScript API
 
 The `sortable()` method must be invoked on valid containers, meaning they must match the containerSelector option.
 
@@ -47,7 +47,7 @@ Remove the sortable plugin from the set of matched elements
 `.sortable('serialize')`
 Serialize all selected containers. Returns a jQuery object . Use .get() to retrieve the array, if needed.
 
-### Supported options:
+### Supported options
 
 - `useAnimation`: Use animation when an item is removed or inserted into the tree.
 
@@ -95,7 +95,7 @@ Serialize all selected containers. Returns a jQuery object . Use .get() to retri
 
 - `tolerance`: Set tolerance while dragging. Positive values decrease sensitivity, negative values increase it.
 
-### Supported options (container specific):
+### Supported options (container specific)
 
 - `drag`: If true, items can be dragged from this container
 
diff --git a/modules/system/assets/ui/docs/popover.md b/modules/system/assets/ui/docs/popover.md
index 35a363295..89ce8e75d 100644
--- a/modules/system/assets/ui/docs/popover.md
+++ b/modules/system/assets/ui/docs/popover.md
@@ -1,64 +1,129 @@
 # Popover
 
-Popover
+Renders a richer version of a tooltip, called a popover.
 
-# Example
+## Examples
 
-    <div class="layout-column full-height-strict justify-center align-center">
-        <div class="outer-form-container layout-item center relative" id="btngroup" style="width: 560px">
-            <div class="btn-group">
-                <a href="#" id="btn1" class="btn btn-primary oc-icon-angle-left" data-control="popover" data-container="#btngroup" data-content="This is a popover" data-placement="left">
-                    Popover on left
-                </a>
-                <a href="#" id="btn2" class="btn btn-primary oc-icon-angle-down">
-                    Popover on bottom
-                </a>
-                <a href="#" id="btn3" class="btn btn-primary oc-icon-angle-up">
-                    Popover on top
-                </a>
-                <a href="#" id="btn4" class="btn btn-primary oc-icon-angle-right" data-control="popover" data-container="#btngroup" data-content="<p>Default popover content</p>" data-placement="right" data-width="200">
-                    Popover on right
-                </a>
-            </div>
-        </div>
+### Basic usage
+
+You may add `data-control="popover"` to an anchor or button to activate a popover. Use the `data-content` attribute to specify the contents.
+
+    <a
+        href="javascript:;"
+        class="btn btn-primary"
+        data-control="popover"
+        data-content="I am a standard popover">
+        Basic popover
+    </a>
+
+### Template content
+
+Define the popover content as a template and reference it with `data-content="#myPopoverContent"`.
+
+```html
+<script type="text/template" id="myPopoverContent">
+    <div class="popover-head">
+        <h3>Popover</h3>
+        <button type="button" class="close" data-dismiss="popover">&times;</button>
     </div>
+    <div class="popover-body">
+        I am a popover
+    </div>
+</script>
+```
 
-    <script>
-        $('#btn1').on('show.oc.popover', function(e, popover){
-            popover.options.content = '<div class="popover-body"><p>Some other content</p></div>'
-        })
+<div style="display:none" id="myPopoverContent">
+    <div class="popover-head">
+        <h3>Popover</h3>
+        <button type="button" class="close" data-dismiss="popover">&times;</button>
+    </div>
+    <div class="popover-body">
+        I am a popover
+    </div>
+</div>
 
-        $('#btn2').on('click', function(){
-            $(this).ocPopover({
-                content: $('#popovertemplate').html(),
-                modal: true,
-                highlightModalTarget: true,
-                placement: 'bottom',
-                container: '#btngroup'
-            })
+    <a
+        href="javascript:;"
+        class="btn btn-primary"
+        data-control="popover"
+        data-width="200"
+        data-content="#myPopoverContent">
+        Template popover
+    </a>
 
-            return false
-        })
+### Event specified content
 
-        $('#btn3').on('click', function(){
-            $(this).ocPopover({
-                content: function(element, popover) {
-                    return '<p>This is a generated content<button type="button" class="close" data-dismiss="popover" aria-hidden="true">&times;</button></p>'
-                },
-                placement: 'top',
-                container: '#btngroup'
-            })
+```js
+$('#btn1').on('showing.oc.popover', function(e, popover) {
+    popover.options.content = '<div class="popover-body">Some other content</div>'
+})
+```
 
-            return false
-        })
-    </script>
+    <a
+        href="javascript:;"
+        class="btn btn-primary"
+        data-control="popover"
+        data-placement="right"
+        id="btn1">
+        Event content popover
+    </a>
 
-    <script type="text/template" id="popovertemplate">
-        <div class="popover-body">
-            <p>Modal popover</p>
-            <p>Modal popover</p>
-            <p>Modal popover</p>
-            <p>Modal popover</p>
-            <a class="btn btn-danger" href="#" onclick="$(this).trigger('close.oc.popover'); return false">Close</a>
-        </div>
-    </script>
+<script>
+$(document).ready(function() {
+    $('#btn1').on('showing.oc.popover', function(e, popover) {
+        popover.options.content = '<div class="popover-body">Some other content</div>'
+    })
+})
+</script>
+
+## JavaScript API
+
+```js
+$('#element').ocPopover({
+    content: '<p>This is a popover</p>'
+    placement: 'top'
+})
+```
+
+### Supported methods
+
+`.ocPopover('hide')`
+Closes the popover. There are 3 ways to close the popover: call it's `hide()` method, trigger the `close.oc.popover` on any element inside the popover or click an element with attribute `data-dismiss="popover"` inside the popover.
+
+### Supported options
+
+- `placement`: top | bottom | left | right | center. The placement could automatically be changed if the popover doesn't fit into the desired position.
+
+- `fallbackPlacement`: top | bottom | left | right. The placement to use if the default placement and all other possible placements do not work. The default value is "bottom".
+
+- `content`: content HTML string or callback
+
+- `width`: content width, optional. If not specified, the content width will be used.
+
+- `modal`: make the popover modal
+
+- `highlightModalTarget`: "pop" the popover target above the overlay, making it highlighted. The feature assigns the target position relative.
+
+- `closeOnPageClick`: close the popover if the page was clicked outside the popover area.
+
+- `container`: the popover container selector or element. The default container is the document body. The container must be relative positioned.
+
+- `containerClass` - a CSS class to apply to the popover container element
+
+- `offset` - offset in pixels to add to the calculated position, to make the position more "random"
+
+- `offsetX` - X offset in pixels to add to the calculated position, to make the position more "random". If specified, overrides the offset property for the bottom and top popover placement.
+
+- `offsetY` - Y offset in pixels to add to the calculated position, to make the position more "random". If specified, overrides the offset property for the left and right popover placement.
+
+- `useAnimation`: adds animation to the open and close sequence, the equivalent of adding the CSS class 'fade' to the containerClass.
+
+### Supported events
+
+- `showing.oc.popover` - triggered before the popover is displayed. Allows to override the popover options (for example the content) or cancel the action with e.preventDefault()
+
+- `show.oc.popover` - triggered after the popover is displayed.
+
+- `hiding.oc.popover` - triggered before the popover is closed. Allows to cancel the action with e.preventDefault()
+
+- `hide.oc.popover` - triggered after the popover is hidden.
diff --git a/modules/system/assets/ui/js/popover.js b/modules/system/assets/ui/js/popover.js
index c2954ae4e..09db1b0cb 100644
--- a/modules/system/assets/ui/js/popover.js
+++ b/modules/system/assets/ui/js/popover.js
@@ -1,49 +1,9 @@
 /*
  * Popover plugin
  *
- * Options:
- * - placement: top | bottom | left | right | center. The placement could automatically be changed 
-     if the popover doesn't fit into the desired position.
- * - fallbackPlacement: top | bottom | left | right. The placement to use if the default placement
- *   and all other possible placements do not work. The default value is "bottom".
- * - content: content HTML string or callback
- * - width: content width, optional. If not specified, the content width will be used.
- * - modal: make the popover modal
- * - highlightModalTarget: "pop" the popover target above the overlay, making it highlighted.
- *   The feature assigns the target position relative.
- * - closeOnPageClick: close the popover if the page was clicked outside the popover area.
- * - container: the popover container selector or element. The default container is the document body.
- *   The container must be relative positioned.
- * - containerClass - a CSS class to apply to the popover container element
- * - offset - offset in pixels to add to the calculated position, to make the position more "random"
- * - offsetX - X offset in pixels to add to the calculated position, to make the position more "random". 
- *   If specified, overrides the offset property for the bottom and top popover placement.
- * - offsetY - Y offset in pixels to add to the calculated position, to make the position more "random". 
- *   If specified, overrides the offset property for the left and right popover placement.
- * - useAnimation: adds animation to the open and close sequence, the equivalent of adding 
- *   the CSS class 'fade' to the containerClass.
- *
- * Methods:
- * - hide
- *
- * Closing the popover. There are 3 ways to close the popover: call it's hide() method, trigger 
- * the close.oc.popover on any element inside the popover or click an element with attribute 
- * data-dismiss="popover" inside the popover.
- *
- * Events:
- * - showing.oc.popover - triggered before the popover is displayed. Allows to override the 
- *   popover options (for example the content) or cancel the action with e.preventDefault()
- * - show.oc.popover - triggered after the popover is displayed.
- * - hiding.oc.popover - triggered before the popover is closed. Allows to cancel the action with
- *   e.preventDefault()
- * - hide.oc.popover - triggered after the popover is hidden.
- *
- * JavaScript API:
- * $('#element').ocPopover({
-    content: '<p>This is a popover</p>'
-    placement: 'top'
- * })
+ * Documentation: ../docs/popover.md
  */
+
 +function ($) { "use strict";
 
     var Popover = function (element, options) {
@@ -108,25 +68,28 @@
          */
         var e = $.Event('showing.oc.popover', { relatedTarget: this.$el })
         this.$el.trigger(e, this)
-        if (e.isDefaultPrevented())
-            return
+        if (e.isDefaultPrevented()) return
 
         /*
          * Create the popover container and overlay
          */
         this.$container = $('<div />').addClass('control-popover')
 
-        if (this.options.containerClass)
+        if (this.options.containerClass) {
             this.$container.addClass(this.options.containerClass)
+        }
 
-        if (this.options.useAnimation)
+        if (this.options.useAnimation) {
             this.$container.addClass('fade')
+        }
 
         var $content = $('<div />').html(this.getContent())
+
         this.$container.append($content)
 
-        if (this.options.width)
+        if (this.options.width) {
             this.$container.width(this.options.width)
+        }
 
         if (this.options.modal) {
             this.$overlay = $('<div />').addClass('popover-overlay')
@@ -135,14 +98,17 @@
                 this.$el.addClass('popover-highlight')
                 this.$el.blur()
             }
-        } else {
+        }
+        else {
             this.$overlay = false
         }
 
-        if (this.options.container)
+        if (this.options.container) {
             $(this.options.container).append(this.$container)
-        else
+        }
+        else {
             $(document.body).append(this.$container)
+        }
 
         /*
          * Determine the popover position
@@ -205,9 +171,17 @@
     }
 
     Popover.prototype.getContent = function () {
-        return typeof this.options.content == 'function'
-            ? this.options.content.call(this.$el[0], this)
-            : this.options.content
+        var content = this.options.content
+
+        if (typeof content == 'function') {
+            return content.call(this.$el[0], this)
+        }
+
+        if (content.charAt(0) === '#') {
+            return $(content).html()
+        }
+
+        return this.options.content
     }
 
     Popover.prototype.calcDimensions = function() {
@@ -407,4 +381,4 @@
         return false;
     })
 
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js
index fd97be051..1b6cc4014 100644
--- a/modules/system/assets/ui/storm-min.js
+++ b/modules/system/assets/ui/storm-min.js
@@ -3407,25 +3407,20 @@ this.options.onCheckDocumentClickTarget=null}
 Popover.prototype.show=function(options){var self=this
 var e=$.Event('showing.oc.popover',{relatedTarget:this.$el})
 this.$el.trigger(e,this)
-if(e.isDefaultPrevented())
-return
+if(e.isDefaultPrevented())return
 this.$container=$('<div />').addClass('control-popover')
-if(this.options.containerClass)
-this.$container.addClass(this.options.containerClass)
-if(this.options.useAnimation)
-this.$container.addClass('fade')
+if(this.options.containerClass){this.$container.addClass(this.options.containerClass)}
+if(this.options.useAnimation){this.$container.addClass('fade')}
 var $content=$('<div />').html(this.getContent())
 this.$container.append($content)
-if(this.options.width)
-this.$container.width(this.options.width)
+if(this.options.width){this.$container.width(this.options.width)}
 if(this.options.modal){this.$overlay=$('<div />').addClass('popover-overlay')
 $(document.body).append(this.$overlay)
 if(this.options.highlightModalTarget){this.$el.addClass('popover-highlight')
-this.$el.blur()}}else{this.$overlay=false}
-if(this.options.container)
-$(this.options.container).append(this.$container)
-else
-$(document.body).append(this.$container)
+this.$el.blur()}}
+else{this.$overlay=false}
+if(this.options.container){$(this.options.container).append(this.$container)}
+else{$(document.body).append(this.$container)}
 this.reposition()
 this.$container.addClass('in')
 if(this.$overlay)this.$overlay.addClass('in')
@@ -3445,7 +3440,10 @@ Popover.prototype.reposition=function(){var
 placement=this.calcPlacement(),position=this.calcPosition(placement)
 this.$container.removeClass('placement-center placement-bottom placement-top placement-left placement-right')
 this.$container.css({left:position.x,top:position.y}).addClass('placement-'+placement)}
-Popover.prototype.getContent=function(){return typeof this.options.content=='function'?this.options.content.call(this.$el[0],this):this.options.content}
+Popover.prototype.getContent=function(){var content=this.options.content
+if(typeof content=='function'){return content.call(this.$el[0],this)}
+if(content.charAt(0)==='#'){return $(content).html()}
+return this.options.content}
 Popover.prototype.calcDimensions=function(){var
 documentWidth=$(document).width(),documentHeight=$(document).height(),targetOffset=this.$el.offset(),targetWidth=this.$el.outerWidth(),targetHeight=this.$el.outerHeight()
 return{containerWidth:this.$container.outerWidth()+this.arrowSize,containerHeight:this.$container.outerHeight()+this.arrowSize,targetOffset:targetOffset,targetHeight:targetHeight,targetWidth:targetWidth,spaceLeft:targetOffset.left,spaceRight:documentWidth-(targetWidth+targetOffset.left),spaceTop:targetOffset.top,spaceBottom:documentHeight-(targetHeight+targetOffset.top),spaceHorizontalBottom:documentHeight-targetOffset.top,spaceVerticalRight:documentWidth-targetOffset.left,documentWidth:documentWidth}}