web-dev-qa-db-ja.com

Twitter Bootstrapのポップオーバープラグインでタイトルを無効にするにはどうすればよいですか？

タイトルを必要としない画像を表示するためにポップオーバーを使用しています。 「タイトル」を設定しない場合でも、タイトルが表示される領域が表示されます。これを完全にオフにするにはどうすればよいですか？

twitter-bootstrappopovertwitter-bootstrap-2
23
Scott C Wilson

baptmeの提案は問題ありませんが、高さ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>'
  })

JSを使用してポップオーバーを宣言するときは、テンプレートをオーバーライドして、非表示のタイトルを指定してください。

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

私がそれを削除しないと言う理由は、要素が存在しない場合、ランタイムエラーを引き起こす可能性があるためです。 Sherbrowのコメントを参照してください。

41
Terry

Bootstrap 2.3+では、タイトルが空の場合、自動的に非表示になります。

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

11
isherwood

@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>
5
Scott C Wilson

簡単な方法は、クラスheight:0pxに.popover-titleを設定し、data-original-titleを使用しないことです。

CSS：

.popover-title { height: 0px;}
1
baptme

要素を削除する関数を書くこともできます：

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

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