Bootstrap опция названия поповера не отменяет название элемента HTML

Question

Я инициализация Popovers 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" >' + 
 
       \t '<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

У меня была точно такая же проблема, но решение Jyothi не работает для меня.

В конце концов я обнаружил, что всплывающие подсказки работают с data-title, а также title, но этот popovers не переопределяет названия конфигураций с 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" >' + 
 
       \t '<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>

Answer 2

Просто удалите атрибут title в Html-коде, если вы хотите, чтобы ваш заголовок Popover появлялся. Он не может переопределить существующий заголовок.

$(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" >' + 
 
       \t '<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>