{{!--<div class="site-example--content slds-scrollable--x slds-tabs__content slds-show" role="tabpanel">
    <div class="slds-p-horizontal--medium">--}}
        <h4 class="site-text-heading--medium">Markup</h4>
{{#aljs-pre-container type="html"}}
<span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="popover" data-aljs-placement="top" title="Up top!">Top</span>
<span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="popover" data-aljs-placement="right" title="Right here!">Right</span>
<span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="popover" data-aljs-placement="bottom" title="Down low!">Bottom</span>
<span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="popover" data-aljs-placement="left" title="To the left, to the left.">Left</span>
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table gives you a quick overview of ALJS-specific markup applied to the SLDS component.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">ALJS Markup</th>
                        <th scope="col">Outcome</th>
                        <th scope="col">Required</th>
                        <th scope="col">Applied to</th>
                        <th scope="col">Comments</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>data-aljs="popover"</code></th>
                        <td data-label="Outcome">Provides a unique identifier for the plugin</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink">Any element</td>
                        <td data-label="Comments"></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-placement="</code><em>direction</em><code>"</code></th>
                        <td data-label="Outcome">Defines the placement of the popover</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <!--<svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span>--></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>[data-aljs="popover"]</code></td>
                        <td data-label="Comments">Defaults to <code>top</code> if the attribute does not exist</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Initialize</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
   $('[data-aljs="popover"]').popover();
});
{{/aljs-pre-container}}
        <h4 class="site-text-heading--medium">Initialize with Options</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('[data-aljs="popover"]').popover({
        modifier: '',
        theme: ''
    });
});
{{/aljs-pre-container}}<p class="slds-m-top--medium">This table details the options available for the jQuery function.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Option</th>
                        <th scope="col">Behavior</th>
                        <th scope="col">Values</th>
                        <th scope="col">Default value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>modifier</code></th>
                        <td data-label="Behavior">Includes the specified SLDS class modifier to the popover</td>
                        <td data-label="Accepted values">Any string representing a popover class modifier (e.g., <code>'tooltip'</code>)</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>''</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>theme</code></th>
                        <td data-label="Behavior">Includes the specified SLDS theme to the popover</td>
                        <td data-label="Accepted values">Any string representing an SLDS theme class modifier (e.g., <code>'error'</code>)</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>''</code></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Initialize on Body</h4>
        <p class="slds-m-bottom--medium">The following method of initializing supports markup added to the DOM post-initialization.</p>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('body').popover({
        selector: '[data-aljs="popover"]'
    });
});
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the options specific to initializing on the body.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Option</th>
                        <th scope="col">Behavior</th>
                        <th scope="col">Values</th>
                        <th scope="col">Required</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>selector</code></th>
                        <td data-label="Behavior">Allows elements matching the selector to show popovers on hover, regardless of whether or not they were present during initialization</td>
                        <td data-label="Values">Any selector</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    {{!--</div>
</div>--}}