Bootstrap popover not working with Jquery UI sortable

Question

Please see the jsfiddle here. http://jsfiddle.net/aejwne1w/

I'm using Jquery 2.1.1, Jquery UI 1.11.2 and Bootstrap 3.2.0. I want to be able to sort, as well as use the popover via a link within the sortable. The sortable works, but the popover doesn't. If I take away the sortable code, the popover works.

<div class="stats">
<div class="panel panel-default ui-sortable-handle">
    <div class="panel-body">
       test1
       <a href="#" tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" viewport="{selector: '.container', padding: 0}" title="" data-content="test1" data-original-title="This is test1">More</a>
    </div>
</div>
<div class="panel panel-default ui-sortable-handle">
    <div class="panel-body">
      test 2
      <a href="#" tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" viewport="{selector: 'body', padding: 0}" title="" data-content="test2" data-original-title="This is test 2">More</a>
    </div>
</div>
<div class="panel panel-default ui-sortable-handle">
    <div class="panel-body">
       test 3
       <a href="#" tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" viewport="{selector: 'body', padding: 0}" title="" data-content="test3" data-original-title="This is test 3">More</a>
    </div>
</div>
</div>

Javascript

<script>
$('a[data-toggle=popover]').popover().click(function (e) {
    e.preventDefault();
});
$(".stats").sortable();
</script>

I know I'm doing something wrong. Please help! Thank you in advance.

Answer 1

Try this

   $(function() {
      $('[title]').attr("data-rel", "tooltip");
      $("[data-rel='tooltip']")
          .attr("data-placement", "top")
          .attr("data-content", function() {
              return $(this).attr("title")
          })
          .removeAttr('title');


      var showPopover = function() {
          $(this).popover('show');
      };
      var hidePopover = function() {
          $(this).popover('hide');
      };
      $("[data-rel='tooltip']").popover({
          trigger: 'manual'
      }).click(showPopover).hover(showPopover, hidePopover);

  });

This i made on Hover, because i think this is more user friendly

Here is update example

 $(function() {
      $('[data-toggle=popover]').attr("data-rel", "tooltip");

      var showPopover = function() {
          $(this).popover('toggle');
      };
      $("[data-rel='tooltip']").click(showPopover);

  });