Inline Confirmation Dialog Plugin - jQuery tipConfirm

The jQuery tipConfirm (Tooltip+Confirm) plugin displays an inline confirmation dialog in a popover-style popup interface when you click on an action element.

See also:

• Lightweight Inline Confirmation Plugin For jQuery
• Simple Inline Confirm Button Plugin With jQuery And Bootstrap
• Inline Confirm Popup Plugin With jQuery - j-confirm-action
• jQuery Plugin To Create Inline Confirm Action Buttons
• Lightweight Inline Confirmation Plugin For jQuery - Inline Affirm

How to use it:

1. Load the core and theme CSS files in the header of the document.

<link rel="stylesheet" href="css/default.css" />
<link rel="stylesheet" href="css/tip.confirm.css" />

2. Load the jQuery tipConfirm plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="js/tip.confirm.js"></script>

3. Load jQuery UI for extra easing effects (OPTIONAL).

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

4. Create a trigger element and specify the message, size, placement and theme of the confirmation dialog.

• data-message: Confirm message
• data-theme: Dialog theme. See default.css.
• data-placement: Top (default), Left, Right, Bottom
• data-size: Tiny, Small (Default), Large

<a href="#" 
   class="example" 
   data-message="Are you sure?" 
   data-theme="black" 
   data-placement="top" 
   data-size="medium">
   Delete Me
</a>

5. Call the function to enable the confirmation dialog on the trigger element.

$('.example').tipConfirm({
  // options here
});

6. Full plugin options to customize the confirmation dialog.

$('.example').tipConfirm({

  // show/hide duration
  duration: 1000,

  // easing effect
  easing: "linear",

  // tiny, small, large
  size: "large",

  // shows custom buttons
  customButtons: true,

  // custom buttons
  buttons: [{
    text: 'Yes',
    event: 'confirm',
    class: 'btn btn-success btn-xs'
  },
  {
    text: 'No',
    event: 'https://gmail.com',
    class: 'btn btn-danger btn-xs'
  }]
  
});

7. Perform a function after you click the confirm button.

$('.example').tipConfirm({

  onSubmit: function(e) {}

});

---

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