Ici, j'ai un exemple de pop-up Bootstrap 3 montrant une image avec le trait au-dessus quand la souris survole du texte. J'ai mis dans un style en ligne que vous voudrez peut-être sortir ou changer .....
Cela fonctionne également très bien sur les appareils mobiles, car l'image apparaîtra sur le premier robinet et le lien s'ouvrira sur le seconde. 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/
S'il vous plaît se référer à ce lien. En utilisant cela, je pense que vous devriez pouvoir afficher l'image aussi. [http://stackoverflow.com/questions/8494291/can-i-use-html-tags-in-twitter-bootstrap-popover- data-content] (http://stackoverflow.com/questions/8494291/can -i-utiliser-html-tags-dans-twitter-bootstrap-popover-données-contenu) – Vins