Question

我正在初始化像这样的Bootstrap的popovers：

＆＃13;

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

＆＃13;

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

＆＃13;

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

有什么想法吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我遇到了同样的问题，但Jyothi的解决方案对我不起作用。

我最终发现工具提示的工作原理是data-title以及title，但是弹出框不会覆盖data-title值的配置标题。

$(".print-barcode").tooltip({trigger: "hover"}); //Don't have to do this usually, but you do to make it work on SO for some reason.
$(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');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <button class='btn btn-sm btn-default print-barcode' data-title="Print Barcodes" data-toggle='tooltip' data-placement='bottom' data-trigger="hover" value='4575456465' data-product-name='Product name' data-product-price='123'><span class='glyphicon glyphicon-barcode'></span></button>
</div>

Bootstrap popover title选项不会覆盖html元素标题

2 个答案: