Làm cách nào để vô hiệu hóa tiêu đề trong plugin popover của Twitter Bootstrap?

Question

Tôi đang sử dụng cửa sổ bật lên để hiển thị hình ảnh không yêu cầu tiêu đề. Nếu bạn không đặt "tiêu đề", nó vẫn hiển thị một khu vực có tiêu đề. Làm thế nào để bạn tắt hoàn toàn điều này?

Theo dõi: Tôi muốn người trả lời giữ nguyên điểm của họ, nhưng tôi đã đăng triển khai cuối cùng của mình dưới dạng câu trả lời riêng biệt bên dưới.

Answer 1

của baptme đề nghị là ok, nhưng cách tốt hơn sẽ được chỉ định tiêu đề của cửa sổ bật lên của bạn và thực sự ẩn nó hoàn toàn vì lề vẫn tồn tại với chiều cao là 0.

.popover-title { display: none; } 

Chỉnh sửa: chỉ quicky nhìn vào nguồn và có vẻ là một lựa chọn không có giấy tờ:

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { 
    placement: 'right' 
    , content: '' 
    , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }) 

Khi bạn khai báo popover bạn sử dụng JS, hãy cố gắng ghi đè lên mẫu và chỉ định một tiêu đề ẩn.

$('#example').popover({ 
    template: '...<h3 class="popover-title" style="display: none"></h3>...' 
}); 

Lý do tôi nói không xóa nó có thể gây ra lỗi thời gian chạy nếu phần tử không tồn tại. Xem nhận xét của Sherbrow.

Answer 2

một cách dễ dàng là để làm thiết height:0px trên lớp .popover-title và không sử dụng data-original-title

CSS:

.popover-title { height: 0px;} 

Answer 3

Tôi sẽ sử dụng kết hợp các kỹ thuật được đề xuất bởi @Terry và @Sherbow. Hiển thị hình ảnh, nhưng không phải là tiêu đề (chỉ cho cửa sổ bật lên này).

<a href="#" id="contributors" rel="popover">contributors</a> 

... 

<script> 
var contributor_img = '<img src="my_img/contributor.png" />' 


$(function() 
{ $('#contributors').popover({ 
    content: contributor_img, 
    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>' }); 
}); 
</script> 

Answer 4

Bạn cũng có thể viết một hàm để loại bỏ yếu tố:

function removeTitle(){ 
    $('.popover-title').remove(); 
} 

$("a[data-toggle=popover]") 
    .popover({ 
    html: true, 
    animation: true 
}) 
.click(function(e) { 
    removeTitle(); 
    e.preventDefault() 
}) 

Answer 5

Trong Bootstrap 2.3 + tiêu đề tự động ẩn nếu có sản phẩm nào.

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/