jQuery plugin for Twitter Bootstrap. Use Bootstrap Popovers as confirmation dialogs. Simple and easy.
This is my primary reason I wrote this plugin. I wanted a simple box to comfirm a task. Instead of using rude boxes that interrupt a user's workflow, let's use a popover instead.
Download bootstrap-confirmation.js. Include after jquery.js and bootstrap-tooltip.js.
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="path/to/bootstrap-confirmation.js"></script>The plugin uses the default popover styling Bootstrap provides.
Add small overlays with "Yes" and "No" buttons, like those on the iPad, to any element. Click the button to trigger the confirmation.
Enable confirmations via JavaScript:
$('#example').confirmation(options)
Recommend way to use:
$('[data-toggle="confirmation"]').confirmation(options)
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
| Name | type | default | description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the tooltip |
| placement | string | function | 'top' | How to position the confirmation - top | bottom | left | right |
| selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets |
| trigger | string | 'click' | How confirmation is triggered - click | hover | focus | manual |
| title | string | function | 'Are you sure?' | Default title value if `data-title` attribute isn't present |
| href | string | function | '#' |
Default href value if `data-href` attribute isn't present. This will be link of the "Ok" button. |
| target | string | function | '_self' |
Default target value if `data-target` attribute isn't present. This will be target of the "Ok" button. |
| btnOkClass | string | function | 'btn-primary' |
Default btnOkClass value if `data-btnOkClass` attribute isn't present. This will be class of the "Ok" button. |
| btnCancelClass | string | function | '' |
Default btnCancelClass value if `data-btnCancelClass` attribute isn't present. This will be class of the "Cancel" button. |
| btnOkLabel | string | function | '<i class="icon-ok-sign icon-white"></i> Yes' |
Default btnOkLabel value if `data-btnOkLabel` attribute isn't present. This will be label of the "Ok" button. |
| btnCancelLabel | string | function | '<i class="icon-remove-sign"></i> No' |
Default btnCancelLabel value if `data-btnCancelLabel` attribute isn't present. This will be label of the "Cancel" button. |
|
singleton New feature! |
boolean | false |
Set true to allow only one confirmation to show at a time. When the newest confirmation element is clicked, the older ones will disappear. |
|
popout New feature! |
boolean | false |
Set true to hide the confirmation when user clicks outside of it. This will affect all confirmations that use same selector. |
| delay | number | object | 0 |
Delay showing and hiding the confirmation (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: |
| container | string | false | false |
Appends the confirmation to a specific element |
| onConfirm | function | function(){} |
Set event when click at confirm button |
| onCancel | function | function(){} |
Set event when click at cancel button |
For performance reasons, the Tooltip and confirmation data-apis are opt in. If you would like to use them just specify a selector option.
Initializes confirmations for an element collection.
Reveals an elements confirmation.
$('#element').confirmation('show')
Hides an elements confirmation.
$('#element').confirmation('hide')
Toggles an elements confirmation.
$('#element').confirmation('toggle')
Hides and destroys an element's confirmation.
$('#element').confirmation('destroy')