do php task on closure of jquery tooltip

99 Views Asked by At

In my website I want to show tooltips on different parts of web page in order to guide user how that part work. So I am using simple jquery tooltip and fetching content of tooltip using ajax. Content contains some text,checkbox of "Do not show this message again" and "Got It" button. I want to perform some php stuff when user click on "Got it" button. That is, once user clicks on button and if he has checked the checkbox, he'll will never be shown tooltip again or until he logs out (in case he has not checked checkbox). Just to close tooltip is not an issue but perform php stuff(I am using Codeigniter framework) is where i am stucked. Here is my jquery code

$('.timeline').tooltip({
show: null,
hide: {effect: "",
  },
content:function(callback) { 
    $.get('<?php echo site_url('candidate/timeline_tooltip'); ?>',
    {},
    function(data){
        callback(data); 
    });
},
open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );},
position: {
                  my: "center right-20",
                  at: "left top",
                  using: function (position, feedback) {
                      $(this).css(position);
                      $("<div>")
        .addClass("arrow")
        .addClass(feedback.vertical)
        .addClass(feedback.horizontal)
        .appendTo(this);
                  }
              },
close: function( event, ui ) {
ui.tooltip.hover(
    function () {
        $(this).stop(true).fadeTo(400, 1); 
    },
    function () {
        $(this).fadeOut("400", function(){ $(this).remove(); })
    }
  );
}

});

And here is code of content page(which i am fetching using ajax)

<form action="" method="post" name="tt_timeline" class="addformClass" id="tt_timeline">
<div style="margin: 20px auto 0px; ">
    <div class="gotItPopup">
        <h1>how it works</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>

        <div class="buttons">
            <input type="checkbox" name="checkbox" id="checkbox" class="chkbox"/><label>Do Not Show This Message Again</label>
            <input type="submit" name="sbtgotit" id="sbtgotit" class="sibmitGotitBtn" value="Got It"/><!--<a href="#" class="btn">Got It</a>-->
        </div>
    </div>
</div>
</form>

Hope that make sense. Any help will be appreciated. Thanks

0

There are 0 best solutions below