## Confirmation Popovers

One of the most complete bootstrap admin templates!

Toggle Code!

##### Basic Demo

Add small overlays with "Yes" and "No" buttons, like those on the iPad, to any element. Click the button to trigger the confirmation. Just add `data-toggle="confirmation"` attribute to button and initialize with js like Bootstrap popovers.

    <button type="button" class="btn btn-primary btn-wide" data-toggle="confirmation">Confirmation</button>

    <!-- ========== JS ========== -->
    <script type="text/javascript">
        $(function($) {
            $('[data-toggle=confirmation]').confirmation();
        });
    </script>

##### On a Link

Confirmation also works natively with links. You can customize the title with `data-title` attribute on link. If you click 'yes', link will be followed. If you click 'No', you will stay on same page.

Go-to Link

    <a class="btn btn-primary btn-wide" data-toggle="confirmation" data-title="Open Link?"  href="https://themeforest.net/item/salt-multipurpose-html5-template/16422281?ref=salttechno" target="_blank">Go-to Link</a>

    <!-- ========== JS ========== -->
    <script type="text/javascript">
        $(function($) {
            $('[data-toggle=confirmation]').confirmation();
        });
    </script>

##### Personalization

Has personalized description, labels, icons and colors.

    <button class="btn btn-large btn-primary" data-toggle="confirmation"
            data-btn-ok-label="Continue" data-btn-ok-icon="glyphicon glyphicon-share-alt"
            data-btn-ok-class="btn-success"
            data-btn-cancel-label="Stoooop!" data-btn-cancel-icon="glyphicon glyphicon-ban-circle"
            data-btn-cancel-class="btn-danger"
            data-title="Is it ok?" data-content="This might be dangerous">
      Confirmation
    </button>

    <!-- ========== JS ========== -->
    <script type="text/javascript">
        $(function($) {
            $('[data-toggle=confirmation]').confirmation();
        });
    </script>

##### Custom Buttons

Completely overwrite the default positive/negative buttons.

    <button class="btn btn-primary" data-toggle="confirmation-custom" data-title="Approve item ?">Confirmation</button>

    <!-- ========== JS ========== -->
    <script type="text/javascript">
        $(function($) {
            $('[data-toggle=confirmation-custom]').confirmation({
                buttons: [
                  {
                    label: 'Approved',
                    class: 'btn btn-xs btn-success',
                    icon: 'glyphicon glyphicon-ok'
                  },
                  {
                    label: 'Rejected',
                    class: 'btn btn-xs btn-danger',
                    icon: 'glyphicon glyphicon-remove'
                  },
                  {
                    label: 'Need review',
                    class: 'btn btn-xs btn-warning',
                    icon: 'glyphicon glyphicon-search'
                  },
                  {
                    label: 'Decide later',
                    class: 'btn btn-xs btn-default',
                    icon: 'glyphicon glyphicon-time'
                  }
                ]
              });
        });
    </script>

##### Singleton

Only one box visible at once.

    <button class="btn btn-default" data-toggle="confirmation" data-singleton="true">Confirmation 1</button>
    <button class="btn btn-default" data-toggle="confirmation" data-singleton="true">Confirmation 2</button>

    <!-- ========== JS ========== -->
    <script type="text/javascript">
        $(function($) {
            $('[data-toggle=confirmation]').confirmation();
        });
    </script>

##### Popout

Click anywhere on the page to close all boxes.

    <button class="btn btn-default" data-toggle="confirmation" data-popout="true">Confirmation 1</button>
    <button class="btn btn-default" data-toggle="confirmation" data-popout="true">Confirmation 2</button>

    <!-- ========== JS ========== -->
    <script type="text/javascript">
        $(function($) {
            $('[data-toggle=confirmation]').confirmation();
        });
    </script>

##### Four directions

You can easily add direction of the popover. You just have to add another attribute `data-placement` with value.

    <button class="btn btn-default" data-toggle="confirmation" data-popout="true" data-placement="left">Confirmation on left</button>
    <button class="btn btn-default" data-toggle="confirmation" data-popout="true" data-placement="top">Confirmation on top</button>
    <button class="btn btn-default" data-toggle="confirmation" data-popout="true" data-placement="bottom">Confirmation on bottom</button>
    <button class="btn btn-default" data-toggle="confirmation" data-popout="true" data-placement="right">Confirmation on right</button>

    <!-- ========== JS ========== -->
    <script type="text/javascript">
        $(function($) {
            $('[data-toggle=confirmation]').confirmation();
        });
    </script>