Qui ho un esempio di pop-up Bootstrap 3 che mostra un'immagine con la piccola sopra quando il mouse passa sopra del testo. Ho inserito alcuni stili in linea che potresti voler rimuovere o modificare .....
Questo funziona anche molto bene sui dispositivi mobili perché l'immagine verrà visualizzata al primo tocco e il collegamento si aprirà sul secondo. 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/
prega di fare riferimento a questo link. Usando questo penso che dovresti poter visualizzare anche l'immagine. [http://stackoverflow.com/questions/8494291/can-i-use-html-tags-in-twitter-bootstrap-popover- data-content] (http://stackoverflow.com/questions/8494291/can -i-use-html-tag-in-twitter-bootstrap-popover-data-content) – Vins