<p>This example uses the data-func=""popoverbar" attribute add context menus that popout of elements in page.</p>

<ul data-array="Items" data-remove="1" data-clear="1">
    <li>
    <span>
        <span data-placeholder="Enter text" data-func="input">Test item</span>
        <div data-func="popoverbar" data-target="ItemToolbar" data-container="span">
            This is the popup content.
            <div class="form-group">
                <label>You can add fields</label>
                <input name="Test" placeholder="Enter text">
            </div>
            Or sub arrays:
            <ul class="form-group" data-array="Subitems" data-remove="1" data-clear="1">
                <li data-func="input" data-name="Text" data-placeholder="Enter text">A sub item</li>
            </ul>
            <button data-action="add" data-target="Subitems">Add sub item</button>
        </div>
        </span>
    </li>
</ul>
<p>
    Add items and click on them to show popoverbar.
</p>
<button data-func="add" data-target="Items">Add item</button>

<!-- Template for the item toolbar -->
<div data-name="ItemToolbar" class="popover bottom">
    <div class="arrow"></div>
    <h3 class="popover-title">
        <span class="close">×</span>
        Configure
    </h3>
    <div class="popover-content addprops"></div>
    <div class="btn-group btn-group-sm btn-group-justified">
        <div class="btn-group">
            <button data-action="remove" title="Delete this field">Delete</button>
        </div>
        <div class="btn-group">
            <button data-action="clone" data-glyphicon="share-alt" title="Clone this field">Clone</button>
        </div>
    </div>
</div>

function AttachDocEvents($e) {
$e.on("click contextmenu", function() {
   $(this).trigger("popover");
   return false;
});
}

Output templates

Templates used for document and web page generation: