मैं छवि को प्रदर्शित करने के लिए ट्विटर बूटस्ट्रैप से पॉपओवर का उपयोग कैसे करूं?

Question

ट्विटर बूटस्ट्रैप की पॉपओवर सुविधा के लिए कैनोलिक उदाहरण शीर्षक के साथ स्टेरॉयड पर टूलटिप की तरह है।

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> 

जे एस:

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

मैं एक छवि प्रदर्शित करने के लिए पॉपओवर उपयोग करना चाहते हैं। क्या यह संभव है?

Answer 1

बहुत ही सरल :)

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

Answer 2

यह मैं क्या उपयोग किया जाता है।

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

और एचटीएमएल

<b id="foo" rel="popover">text goes here</b> 

Answer 3

mattbtay क्या कहा के लिए इसी तरह की क्रमबद्ध करें, लेकिन कुछ परिवर्तन के लिए। आवश्यक एचटीएमएल: सच।
इस स्क्रिप्ट को पृष्ठ के नीचे बंद शरीर टैग की ओर रखें।

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

Answer 4

जेनरेट किए गए लिंक :) एचटीएमएल के साथ सरल:

<span class='preview' data-image-url="imageUrl.png" data-container="body" data-toggle="popover" data-placement="top" >preview</span> 

js:

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

http://jsfiddle.net/A4zHC/

Answer 5

यहां मेरे पास बूटस्ट्रैप 3 पॉपओवर का एक उदाहरण दिखा रहा है जब माउस कुछ पाठ पर होवर करता है तो उसके ऊपर टिटल के साथ एक छवि दिखाती है। मैंने कुछ इनलाइन स्टाइल में रखा है कि आप बाहर लेना या बदलना चाहते हैं .....

यह मोबाइल उपकरणों पर भी बहुत अच्छा काम करता है क्योंकि छवि पहली टैप पर पॉपअप करेगी और लिंक चालू होगा दूसरा। एचटीएमएल:

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