启用jQuery鼠标悬停事件

Question

I have some code that displays a message when a link is hovered over. This is using tooltipster and initially on page load it works fine. My problem happens when i click a radio button, this in turn changes the text of class tooltipbfile to what I want but when I click to change the text back, it seems to have lost its hover function. No tooltip is displayed. Do I have to enable mouseenter events somewhere. I have looked at code like $(".tooltipbfile").prop('enabled', true); but it doesn't make any difference.

I would appreciate if someone could show me the correct way to re enable mouse events after a click event. Thanks

UPDATE : As per tooltipster API. $(".tooltipbfile").tooltipster('disable');

jQuery code

$(function() {
 $('input:radio').click(function(){
  if($(this).val()=='New Intake'){
     $("#fileref").hide();
     $(".maxbox").show();
     $("#INTKAddMoreFileBox").show();
     $(".tooltipbfile").text("Help");

  }else if($(this).val()=='New Intake Files'){
     $("#fileref").show();
     $(".maxbox").hide();
     $(".tooltipbfile").text("Some text here.").show();
     $("#INTKAddMoreFileBox").hide();
     $(".tooltipbfile").tooltipster('disable');
  }

});
});

Tooltipster code

Works correctly on page load

<script type="text/javascript">
$(document).ready(function() {
            $('.tooltipbfile').tooltipster({
            theme: 'tooltipster-light',
            position: 'right',
            animation: 'fade',
            fixedWidth: 200,
            maxWidth: 290,
            content: $('<span>blah blah blah</span>')
            });
        });
</script>

HTML

relevant part

<div class="fieldset">
  <h1><span>Enter Box(es) Reference</span></h1>
  <p>
    <a href="#" id="INTKAddMoreFileBox" class="btn btn-info">Add More Boxes</a>
    <span class="maxbox" style="margin-left:10px;font-size:10px;color: grey;">( Maximum 8 )</span>
    <!--<div class="bxhelp">
      You now have the ability to input more than 1 box just by clicking the Add More boxes link. Please only enter 1 box reference per box. You can enter up to a maximum of 8 boxes.
      <a href="javascript:void(0)" class="boxhelpcls">Close</a>
      </div>-->
  <div id="INTKInputsWrapper">
    <p>
      <input name="box_add[]" type="text" required="required />
      <a href="javascript:void(0)" class="removeclass"></a>
      <a style="margin-left: 14px;" href="javascript:void(0)" class="tooltipbfile">Help</a>
    </p>
  </div>
  </p>
</div>
<div class="fieldset" id="fileref">
  <h1><span>Enter File References</span></h1>
  <p>
    <a href="javascript:void(0)" id="BFINTKAddMoreFile" class="btn btn-info">Add More Files</a>
    <span class="fmaxbox" style="margin-left:10px;font-size:10px;color: grey;">( Maximum 8 )</span>
    <!--<div class="fbxhelp">
      You now have the ability to input more than 1 file just by clicking the Add More files link. You can enter up to a maximum of 8 files.
      <a href="javascript:void(0)" class="fboxhelpcls">Close</a>
      </div>-->
  <div id="BFINTKInputsWrapper">
    <p>
      <input name="bfile_add[]" id="bfile_add[]" type="text" required="required" />
      <a href="javascript:void(0)" class="removeclass"></a>
      <a style="margin-left: 14px;" href="javascript:void(0)" class="fboxhelp">Help</a>
    </p>
  </div>
  </p>
</div>

Answer 1

After clicking the object to turn it back into a tooltipbfile, simply re-call tooltipster() on it, as the program does on document.ready:

.tooltipster({
        theme: 'tooltipster-light',
        position: 'right',
        animation: 'fade',
        fixedWidth: 200,
        maxWidth: 290,
        content: $('<span>blah blah blah</span>')
        });

I've never used tooltipster, but this should work.