Tại sao thuộc tính tiêu đề html và dữ liệu khởi động twitter-gốc-tựa đề loại trừ lẫn nhau?

Question

Tôi có phần tử div HTML khi nhấp vào hiển thị cửa sổ bật lên twitter bootstrap. Mã hiện tại trông giống như sau:

<div class="popover" title="supplementary info about html element" 
    data-original-title="popover title" data-content="popover content..."> 
</div> 

$(document).on('ready', function() { 
    App.Utils.Popover.enableAll(); 
}); 

App.Utils.Popover = { 
    enableAll: function() { 
    $('.popover').popover(
     { 
     trigger: 'click', 
     html : true, 
     container: 'body', 
     placement: 'right' 
     } 
    ); 
}; 

Vấn đề là twitter bootstrap lấy giá trị thuộc tính title và hiển thị làm tiêu đề dữ liệu gốc. Bất kỳ cách nào để làm cho cả hai làm việc cùng nhau như dự định?

Answer 1

Điều này là do javascript bật lên mở rộng chú giải công cụ javascript và chú giải công cụ javascript là (tôi tin) nhằm thay thế chú giải công cụ mặc định được đặt bởi thuộc tính tiêu đề.

Mã này là thủ phạm (trong bootstrap-tooltip.js, như 253ish)

, fixTitle: function() { 
    var $e = this.$element 
    if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { 
    $e.attr('data-original-title', $e.attr('title') || '').attr('title', '') 
    } 
} 

đâu nếu có một thuộc tính tiêu đề thì thuộc tính dữ liệu gốc-danh hiệu sẽ được thay thế bởi thuộc tính tiêu đề.

Chỉnh sửa Về cơ bản, câu trả lời của tôi sẽ không có cách nào dễ dàng. Bạn sẽ phải mod jst bootstrap một chút mặc dù tôi sẽ không thực sự khuyên bạn nên trong trường hợp này. Có thể sử dụng một phiên bản cũ của cửa sổ bật lên bootstrap có thể không có mã trong đó?

Answer 2

Tôi đã gặp vấn đề tương tự và không thể sử dụng phiên bản Bootstrap khác, vì vậy tôi đã quyết định đưa chức năng của mình vào nguyên mẫu bật lên. Đừng cố gắng này ở nhà:

<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script> 
<script type="text/javascript"> 
    // dirty hack 
    $.fn.popover.Constructor.prototype.fixTitle = function() {}; 
</script> 

Bây giờ bạn có thể thêm tiêu đề cho popover và một tiêu đề cho các trình duyệt di chuột:

<i data-placement="bottom" data-trigger="click" 
    bs-popover="'views/partials/notifications.html'" data-html="true" 
    data-unique="1" 
    data-original-title="This title will be used by the popover" 
    title="This title will be used by a browser for a mouseover" 
/>