Question

请在这里查看jsfiddle。 http://jsfiddle.net/aejwne1w/

我使用的是Jquery 2.1.1，Jquery UI 1.11.2和Bootstrap 3.2.0。我希望能够排序，以及通过sortable中的链接使用popover。可分类的工作，但popover没有。如果我拿走了可排序的代码，那么popover就可以了。

<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>

我知道我做错了什么。请帮忙！提前谢谢。

Answer 1

试试这个

   $(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);

  });

这是我在Hover上做的，因为我认为这更加用户友好

这是更新示例

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

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

  });

Bootstrap popover无法使用Jquery UI进行排序

1 个答案: