CODEWITHSUNDEEP
jquerytwitter-bootstrap
yanko-belov
yanko-belov

Reputation: 503

Bootstrap popover title option do not override the html element title

I'm initializing Bootstrap's popovers like this:

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

The problem is that the title that I set in jQuery do not override the button title attribute.

Any ideas?

Upvotes: 3

Views: 2446

Answers (2)

ndtreviv
ndtreviv

Reputation: 3624

I had the exact same problem, but Jyothi's solution wasn't working for me.

I eventually discovered that tooltips work off of data-title as well as title, but that popovers don't override config titles with data-title values. 

$(".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>

Upvotes: 0

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10282

Just remove the title attribute in Html code if you want your Popover title to appear. It can't override the existing 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>

Upvotes: 2

Related Questions