jquery - Bootstrap 弹出窗口标题选项不会覆盖 html 元素标题

Question

我正在像这样初始化 Bootstrap 的弹出窗口:

$(document).on("click", ".print-barcode", function () {
    $(this).popover({
        html: true,
        container: 'body',
        title: '<strong>Some other title</strong>',
        content:
        '<div class="form-group per60">' +
          '<div class="input-group">' +
            '<input class="form-control print-quantity" type="text" placeholder="бр" value="1" >' +
            '<div class="input-group-btn">' +
              '<button class="btn btn-default print-barcode-send"  >' +
              	'<span class="glyphicon glyphicon-print"></span>' +
              '</button>' +
            '</div>' +
          '</div>' +
        '</div>',
        placement: 'bottom'
    }).popover('toggle');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="container">
  <button class='btn btn-sm btn-default print-barcode' data-toggle='tooltip' data-placement='top' title='Print barcodes' value='4575456465' data-product-name='Product name' data-product-price='123'><span class='glyphicon glyphicon-barcode'></span></button>
</div>

问题是我在 jQuery 中设置的标题没有覆盖按钮标题属性。

有什么想法吗？

Answer 1

如果您希望显示 Popover 标题，只需删除 Html 代码中的 title 属性即可。它不能覆盖现有标题。

$(document).on("click", ".print-barcode", function () {
    $(".print-barcode").attr("title", "");
    $(this).popover({
        html: true,
        container: 'body',
        title: '<strong>Some other title</strong>',
        content:
        '<div class="form-group per60">' +
          '<div class="input-group">' +
            '<input class="form-control print-quantity" type="text" placeholder="бр" value="1" >' +
            '<div class="input-group-btn">' +
              '<button class="btn btn-default print-barcode-send"  >' +
              	'<span class="glyphicon glyphicon-print"></span>' +
              '</button>' +
            '</div>' +
          '</div>' +
        '</div>',
        placement: 'bottom'
    }).popover('toggle');
    $(".print-barcode").attr("title", "Print Barcodes");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="container">
  <button class='btn btn-sm btn-default print-barcode' title="Print Barcodes" data-toggle='tooltip' data-placement='top' value='4575456465' data-product-name='Product name' data-product-price='123'><span class='glyphicon glyphicon-barcode'></span></button>
</div>