jConfirm - Confirmation Tooltip

    $(function(){
        $('[data-toggle="confirm"]').jConfirm({
            //false|array: if provided, this will override the default confirm/deny buttons (see below for an example)
            btns: false,
            //string: question displayed to the user
            question: 'Are you sure?',
            //string: confirm button text
            confirm_text: 'Yes',
            //string: deny button text
            deny_text: 'No',
            //boolean: if true, when the confirm button is clicked the user will be redirected to the button's href location
            follow_href: true,
            //boolean: if true and follow_href is true, the href will be opened in a new window
            open_new_tab: false,
            //boolean: if true, the tooltip will be hidden if you click outside of it
            hide_on_click: true,
            //string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
            position: 'auto',
            //boolean: if true, the deny button will be shown
            show_deny_btn: true,
            //string ('black', 'white', 'bootstrap-4', 'bootstrap-4-white')
            theme: 'black',
            //string ('tiny', 'small', 'medium', 'large')
            size: 'small',
            //boolean: show the tooltip immediately on instantiation
            show_now: false,
            //string: class(es) to add to the tooltip
            'class': ''
        }).on('confirm', function(e){
            var btn = $(this);
            //do something on confirm
        }).on('deny', function(e){
            var btn = $(this);
            //do something on deny
        }).on('jc-show', function(e, tooltip){
            //do something when tooltip is shown
            //tooltip dom element is passed as the second parameter
        }).on('jc-hide', function(e){
            //do something when tooltip is hidden
        });

        //gets the currently displayed tooltip (if any)
        var current_tooltip = $.jConfirm.current;
        //gets the button that was clicked for the current tooltip
        current_tooltip.dom;
        //hides the current tooltip (remember to make sure there is one first)
        //returns the original dom element
        //you can pass false to disable triggering the hide event
        current_tooltip.hide(false);
    });
        

All options can be set globally:

    $.jConfirm.defaults.question = 'Are you sure?';
    $.jConfirm.defaults.confirm_text = 'Yes';
    $.jConfirm.defaults.deny_text = 'No';
    $.jConfirm.defaults.theme = 'black';
            

All options can be set with data attributes:

    <a href='#'
       data-toggle="confirm"
       data-question="Are you sure?"
       data-confirm_text="Yes"
       data-deny_text="No"
       data-id="1">Delete it!</a>
            

    $('[data-toggle="confirm"]').jConfirm().on('confirm', function(e){
       var btn = $(this),
            id = btn.data('id');
       //do something
    });
            

Examples

Delete Button:

    <a href="#"
       class="btn btn-danger delete-record"
       data-record_id="1">
        <i class="fa fa-trash-o"></i>
    </a>
            

    $('.delete-record').jConfirm().on('confirm', function(e){
        var btn = $(this),
            record_id = btn.data('record_id');
        alert('Deleting record: '+record_id);
    });
            

External Link Warning:

    <a href="https://htmlguy.com"
          data-open_new_tab=true
          class="btn btn-secondary outside-link">
        Visit HTMLGuy.com
    </a>
            

    $('.outside-link').jConfirm({
        question:'You are about to visit an external site, are you sure you want to leave?',
        confirm_text: 'Yes, let\'s go!',
        deny_text:' No way!',
        follow_href: true,
    });
            

Social Media Sharing:

    <a href="#"
          class="btn btn-primary social-share"
          data-url-to-share="https://htmlguyllc.github.io/jConfirm/">
        <i class="fa fa-share-square-o"></i>
    </a>
            

    $('.social-share').jConfirm({
        //open in new tab
        open_new_tab: true,
        question: 'Share to your favorite social media sites!',
        btns: [
            {
                text:'<i class="fa fa-facebook"></i> Facebook',
                event:'facebook-share',
                data: {
                    some_data_attr: 1
                },
                class:'facebook-btn'
            },
            {
                text:'<i class="fa fa-twitter"></i> Twitter',
                event:'twitter-share',
                data: {
                    some_data_attr: 2
                },
                class:'twitter-btn'
            }
        ]
    }).on('facebook-share', function(e, data){
        var btn = $(this);
        var data_attr = data.some_data_attr; //1
        var url = 'http://www.facebook.com/sharer.php?u='+btn.data('url-to-share');
        window.open(
          url,
          '_blank'
        );
    }).on('twitter-share', function(e, data){
        var btn = $(this);
        var data_attr = data.some_data_attr; //2
        var url = 'http://twitter.com/share?text=This%20is%20the%20best!&url='+btn.data('url-to-share');
        window.open(
          url,
          '_blank'
        );
    });