49

Twitter Bootstrap のポップオーバー機能の標準的な例は、タイトル付きのステロイドに関するツールチップのようなものです。

HTML:

<a href="#" id="blob" class="btn large primary" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A title">hover for popover</a>

JS:

<script>
$("#blob").popover({offset: 10});
</script>

ポップオーバーを使用して画像を表示したいと思います。これは可能ですか？

4

5 に答える 5

83

とてもシンプルです:)

<a href="#" id="blob" class="btn large primary" rel="popover">hover for popover</a>

var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';

$("#blob").popover({ title: 'Look! A bird!', content: img, html:true });

http://jsfiddle.net/weuWk/

于 2012-06-18T18:13:45.603 に答える
14

mattbtay が言ったことに似ていますが、いくつかの変更があります。html:true が必要です。
このスクリプトをページの下部にある body タグを閉じる方向に配置します。

<script type="text/javascript">
 $(document).ready(function() {
  $("[rel=drevil]").popover({
      placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
      title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
      html: 'true', //needed to show html of course
      content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>


次に、HTML は次のとおりです。

<a href="#" rel="drevil">mischief</a>
于 2012-08-31T05:01:55.833 に答える
6

これは私が使用したものです。

$('#foo').popover({
    placement : 'bottom',
    title : 'Title',
    content : '<div id="popOverBox"><img src="http://i.telegraph.co.uk/multimedia/archive/01515/alGore_1515233c.jpg" /></div>'
});

そしてHTMLの

<b id="foo" rel="popover">text goes here</b>
于 2012-06-20T03:30:03.187 に答える
1

ここでは、Bootstrap 3 のポップオーバーの例を示します。マウスがテキストの上に置かれたときに、その上にタイトルが表示された画像が表示されます。削除または変更したいインライン スタイリングをいくつか入れました.....

これは、最初のタップで画像がポップアップし、2 回目のタップでリンクが開くため、モバイル デバイスでもうまく機能します。html:

<h5><a href="#" title="Solid Tiles Template" target="_blank" data-image-url="http://s29.postimg.org/t5pik8lyf/tiles1_preview.jpg" class="preview" rel="popover" style="color: green; font-style: normal; font-weight: bolder; font-size: 16px;">Template Preview 1 <i class="fa fa-external-link"></i></a></h5>

<h5><a href="#" title="Clear Tiles Template" target="_blank" data-image-url="http://s9.postimg.org/rdonet7jj/tiles2_2_preview.jpg" class="preview" rel="popover" style="color: red; font-style: normal; font-weight: bolder; font-size: 16px;">Template Preview 2 <i class="fa fa-external-link"></i></a></h5>

<h5><a href="#" title="Clear Tiles Template" target="_blank" data-image-url="http://s27.postimg.org/8scrcdu9v/tiles3_3_preview.jpg" class="preview" rel="popover" style="color: blue; font-style: normal; font-weight: bolder; font-size: 16px;">Template Preview 3 <i class="fa fa-external-link"></i></a></h5>

js:

$('.preview').popover({
    'trigger':'hover',
    'html':true,
    'content':function(){
        return "<img src='"+$(this).data('imageUrl')+"'>";
    }
});

https://jsfiddle.net/pepsimax_uk/myk38781/3/

于 2015-04-07T13:40:19.883 に答える