24

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

4

5 に答える 5

41

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 のコメントを参照してください。

于 2012-06-27T12:30:17.360 に答える
5

@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>
于 2012-07-02T11:16:48.627 に答える
1

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

CSS:

.popover-title { height: 0px;}
于 2012-06-27T12:22:47.477 に答える
0

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

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

$("a[data-toggle=popover]")
  .popover({
     html: true,
     animation: true
})
.click(function(e) {
  removeTitle();
  e.preventDefault()
})
于 2013-03-29T14:16:18.153 に答える