Lightweight jQuery Confirmation Tooltip Plugin - jConfirm

Lightweight jQuery Confirmation Tooltip Plugin - jConfirm

jConfirm is a simple jQuery plugin that displays a confirm dialog box in a popup tooltip interface, with callback events support.

How to use it:

1. Include jQuery library and the jQuery jConfirm plugin's javascript and CSS at the end of the document.

<link href="jConfirm.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js"></script>
<script src="jConfirm.min.js"></script>

2. Create a button that will popup a confirm box when clicked on.

<a href='#' class="btn" data-toggle="confirm" role="button">Demo</a>

3. Initialize the plugin and set the custom messages and label text for the confirm box.

$('[data-toggle="confirm"]').jConfirm({
  question:'Are you sure?',
  confirm_text: 'Yes',
  deny_text: 'No'
})

4. Change the default theme of the confirm dialog. Possible themes: 'black', 'white', 'bootstrap-4', 'bootstrap-4-white'.

$('[data-toggle="confirm"]').jConfirm({
  question:'Are you sure?',
  confirm_text: 'Yes',
  deny_text: 'No',
  theme: 'black',
})

5. More customization options for the confirm dialog.

$('[data-toggle="confirm"]').jConfirm({
  // an array of buttons
  btns: false,
  
  // redirects to the button's href location
  follow_href: false,
  // hides on click
  hide_on_click: true,
  // 'auto','top','bottom','left','right'
  position: 'auto',
  // extra class(es)
  class: '',
  // shows deny button
  show_deny_btn: true
  
})

6. Event handlers.

$('[data-toggle="confirm"]').jConfirm({
  question:'Are you sure?',
  confirm_text: 'Yes',
  deny_text: 'No',
  class: 'sm'
}).on('confirm', function(e){
  console.log("confirm");
}).on('deny', function(e){
  console.log("deny");
}).on('jc-show', function(e, value){
  console.log('js-show');
}).on('jc-hide', function(e){
  console.log('js-hide');
});

Changelog:

2018-09-30

  • fix for triggered hide/show event on window resize and ability to disable triggering event when manually hiding tooltip

This awesome jQuery plugin is developed by VersatilityWerks. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 30.09.2018
  • Source