TipConfirm - jQuery Confirmation through ToolTip plugin

TipConfirm is a JQuery plugin to provide a different way of confirmation inside a tooltip.

Features

• Size (Tiny, Small and Large)
• Customizable buttons and events
• Customizable tooltip placements
• Show/Hide duration and effects

Get a copy of the plugin

You can download the plugin from GitHub.

Load the required files

Inside the page's head tag include the library and plugin's CSS files.

<link rel="stylesheet" type="text/css" href="lib/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css" />

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

In the page's footer, just before, include the required JavaScript files.

<script src="vendor/jquery/jquery.min.js"></script>
<script src="js/tip.confirm.js"></script>

Create the HTML markup

<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>

Instantiate the tipConfirm

<script type="text/javascript">
    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) {}
        });
    }); 
</script>

Demo

Live Examples.

Support

If you found a bug or have a feature suggestion, please email me on [email protected]. If you need help with implementing the "Multi Select" in your project feel free to contact me on [email protected].

License The plugin is available under the MIT license.