Inline Confirmation Dialog Plugin - jQuery tipConfirm

File Size: 7.75 KB
Views Total: 946
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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="" 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=""></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="#" 
   data-message="Are you sure?" 
   Delete Me

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

  // options here

6. Full plugin options to customize the confirmation dialog.


  // 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: '',
    class: 'btn btn-danger btn-xs'

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


  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.