Как отключить заголовок в Twitter Bootstrap popover плагин?

Я использую popover для отображения изображения, которое не требует названия. Если вы не установите "title", он по-прежнему отображает область, в которой будет заголовок. Как вы полностью отключите это?

Последующие действия: я хотел, чтобы ответчики сохраняли свои баллы, но я опубликовал свою окончательную реализацию в качестве отдельного ответа ниже.

Ответ 1

Предложение baptme в порядке, но лучшим способом было бы указать название вашего popover и фактически скрыть его полностью, поскольку поля все еще существуют с высотой 0.

.popover-title { display: none; }

Изменить: просто быстро посмотрел на источник, и, кажется, есть недокументированная опция:

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

Когда вы объявляете свой popover с помощью JS, попробуйте переопределить шаблон и указать скрытый заголовок.

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

Причина, по которой я говорю, не удаляет ее, это может привести к ошибкам во время выполнения, если элемент не существует. См. комментарий Шерброва.

Ответ 2

В Bootstrap 2.3+ заголовок автоматически скрывается, если он пуст.

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

Ответ 3

Я закончил с помощью комбинации методов, предложенных @Terry и @Sherbow. Показывает изображение, но не заголовок (только для этого всплывающего окна).

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

Ответ 4

простой способ состоит в том, чтобы сделать набор height:0px в классе .popover-title и не использовать data-original-title

CSS

.popover-title { height: 0px;}

Ответ 5

Вы также можете написать функцию для удаления элемента:

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

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