jQuery Inline Confirmation Plugin

1. Introduction

tipConfirm is a tiny jQuery confirmation plugin. The plugin comes with some nice features like: customization options for buttons and events, changing tooltip placement, show/hide duration and effects. tipConfirm plugin

Jquery confirm dialog inline tooltip

2. Plugin Overview

Library	tipConfirm
Author	Ganpat S. Rajpurohit
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 3.3.1 or Latest version

Demo

3. How to install and use tipConfirm jQuery plugin

Follow the below steps to install tipConfirm jQuery plugin on your website.

1. Load the required jQuery and tipConfirm files:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

2. Create HTML structure:

<a href="#" class="btn btn-warning btn-sm tc-delete" data-message="Are you sure you want to delete?" data-theme="black" data-placement="left"> <i class="fa fa-trash"></i> </a>

<a href="#" class="btn btn-warning btn-sm tc-delete" data-message="Are you sure you want to send mail?" data-theme="red" data-placement="top"> <i class="fa fa-envelope"></i> </a>

<a href="#" class="btn btn-warning btn-sm tc-delete" data-message="Sure to save?" data-theme="aqua" data-placement="top"> <i class="fa fa-save"></i> </a>

<a href="#" class="btn btn-danger btn-sm tc-share" data-message="Share to your favorite social media sites!" data-theme="green" data-placement="bottom"> <i class="fa fa-share-square-o"></i> </a>

3. Instantiate the tipConfirm plugin:

 jQuery( document ).ready(function( $ ) { 
        $( '.tc-delete' ).tipConfirm();

        $( '.tc-mail' ).tipConfirm({
          onSubmit: function(event, element) { }
        });

        $('.tc-save').tipConfirm({
            duration: 150,
            size: "small",
            buttons: [{
                    text: 'Yes',
                    event: 'confirm',
                    class: 'btn btn-success btn-xs margin-right'
                },
                {
                    text: 'No',
                    event: 'dismiss',
                    class: 'btn btn-info btn-xs'
                }
            ],
            onSubmit: function(event, element) {}
        });

        $('.tc-share').tipConfirm({
            duration: 150,
            easing: "easeInOutCirc",
            size: "small",
            buttons: [{
                    event: 'https://facebook.com',
                    class: 'btn btn-xs btn-default fa fa-facebook-square margin-right'
                },
                {
                    event: 'https://linkedin.com',
                    class: 'btn btn-xs btn-default fa fa-linkedin-square margin-right'
                },
                {
                    event: 'https://pinterest.com',
                    class: 'btn btn-xs btn-default fa fa-pinterest-square margin-right'
                },
                {
                    event: 'https://twitter.com',
                    class: 'btn btn-xs btn-default fa fa-twitter-square margin-right'
                }
            ],
            onSubmit: function(event, element) {}
        });
    });

4. Conclusion

In this article, we presented tipConfirm jQuery plugin that can be used for inline confirmations on your website. The plugin is a great alternative for using modals and popups in interaction with users. This is also the quickest way to prompt the user with a question.