title: Change Bootstrap Popover trigger on Click
body: <p>I am trying to change the trigger of a Bootstrap popover using an html switch, I have some basic jQuery set up but each time I flip the switch each but popover responds differently.</p>
  
  <p>I set up each popover, then put it into a function that I can call each time I change the trigger. I have the trigger set as a global variable that is changed by the function that runs on the html switch change.</p>
  
  <p>Here is my jquery, the html is located at the codepen link.</p>
  
  <pre><code>jQuery(document).ready(function ($) {
  
    var click_funct = 'hover';
    $(".nrl-hint").contents().find(":checkbox").bind('change', function(){
      var check_checked = $('#nrl-hint').is(":checked");
  
      if (check_checked) {
        console.log("Check ran");
      click_funct = 'click';
      $("[data-toggle=popover]").popover('destroy');
      $("[data-toggle=popover_2]").popover('destroy');
      $("[data-toggle=popover_3]").popover('destroy');
      $("[data-toggle=popover_4]").popover('destroy');
      $("[data-toggle=popover_5]").popover('destroy');
      box_funct(click_funct);
      }
      else {
        console.log('Check ran x2');
        click_funct = 'hover';
        $("[data-toggle=popover]").popover('destroy');
        $("[data-toggle=popover_2]").popover('destroy');
        $("[data-toggle=popover_3]").popover('destroy');
        $("[data-toggle=popover_4]").popover('destroy');
        $("[data-toggle=popover_5]").popover('destroy');
      box_funct(click_funct);
      }
  });
  function box_funct(click_funct) {
    $(".ow-button-hover").attr("href", "javascript:void(0)");
    $('.ow-button-hover').popover({ 
        html : true, 
        trigger : 'click',
        placement: "top",
        content: function() {
          return $('#contact_form_nrl').html();
        },
        template: '&lt;div class="popover nrl-popover"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="popover-inner"&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
      });
  
    $('[data-toggle=popover]').popover({ 
        html : true, 
        trigger : click_funct,
        content: function() {
          return $('#popover_content_wrapper').html();
        },
        template: '&lt;div class="popover nrl-popover"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="popover-inner"&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
      });
  
      $('[data-toggle=popover_2]').popover({ 
        html : true,
        trigger : click_funct, 
        content: function() {
          return $('#popover_content_wrapper_2').html();
        },
        template: '&lt;div class="popover nrl-popover"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="popover-inner"&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
      });
      $('[data-toggle=popover_3]').popover({ 
        html : true,
        trigger : click_funct,
        placement : 'left', 
        content: function() {
          return $('#popover_content_wrapper_3').html();
        },
        template: '&lt;div class="popover nrl-popover"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="popover-inner"&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
      });
      $('[data-toggle=popover_4]').popover({ 
        html : true,
        trigger : click_funct,
        placement : 'right', 
        content: function() {
          return $('#popover_content_wrapper_4').html();
        },
        template: '&lt;div class="popover nrl-popover"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="popover-inner"&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
      });
  
      $('[data-toggle=popover_5]').popover({ 
        html : true,
        trigger : click_funct,
        placement : 'right', 
        content: function() {
          return $('#popover_content_wrapper_5').html();
        },
        template: '&lt;div class="popover nrl-popover-2"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="popover-inner"&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
      });
    }
    box_funct(click_funct);
  });
  </code></pre>
  
  <p>Here is a codepen link to demonstrate. <a href="https://codepen.io/RobertCC/pen/Qqzwgd" rel="nofollow noreferrer">https://codepen.io/RobertCC/pen/Qqzwgd</a></p>
  
  <p>I greatly appreciate any help! I know I am probably missing something.</p>