Bootstrap Hover Bild Display Beispiel

Ich versuche, ein einfaches Bild anzuzeigen, wenn der Benutzer über den Link schwebt, im Anschluss an die example found here auf den Buchstaben, aber ich bekomme kein Bild angezeigt.Bootstrap Hover Bild Display Beispiel

ich folgende UI haben, wenn Benutzer klickt Flotte sehen die Daten asynchron zurückgegeben wird, und das Beispiel-Code wird innerhalb des Skripts platziert, um die Daten zurückkehrt, also:

Benutzer klickt Ansicht Flotte

CODE

$('a[rel=popover]').popover({ 
    html: true, 
    trigger: 'hover', 
    placement: 'bottom', 
    content: function(){return '<img src="'+$(this).data('img') + '" />';} 
});

ViewFleet.php

<td> <a class="btn" rel="popover" data-img="//placehold.it/400x200"> <?php echo $row['model'] ?></a></td>

Jede Hilfe oder Beratung über die oben sehr geschätzt.

Quelle

2016-09-24 Timothy Coetzee

haben sind Sie Tooltip Plugin? – monkeyinsight

@monkeyinsight Ich habe nicht ... lassen Sie mich Quicky überprüfen –

@monkeyinsight Entschuldigung, wenn ich dumm hier bin, aber ich kann nicht sehen, das Tooltip-Plugin ... –

Dieser Code funktioniert:

hinzufügen Bootstrap und jquery
http: am Betteln der Bild-URL incase Sie sind Testen ohne Server (öffnen Sie einfach die Datei im Browser) ohne HTTP-Anfrage

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<a class="btn" rel="popover" data-img="https://placehold.it/400x200"> ABC TEST </a> 
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


<script> 
$('a[rel=popover]').popover({ 
html: true, 
trigger: 'hover', 
placement: 'bottom', 
content: function(){return '<img src="'+$(this).data('img') + '" />';} 
}); 
</script>

Quelle

2016-09-24 03:39:08

Vielen Dank, musste eine kleine zwicken, aber es funktioniert –

Sie sind sehr willkommen :) –

diesen Code Versuchen Sie stattdessen, dass Sie ein Bild auf schweben zeigen helfen:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover({ 
     placement : 'top', 
     trigger : 'hover', 
     html : true, 
     content : '<div class="media"><a href="#" class="pull-left"><img src="image2.png" class="media-object" alt="Sample Image"></a><div class="media-body"></div></div>' 
    }); 
}); 
</script> 
<style type="text/css"> 
    .bs-example{ 
     margin: 200px 150px 0; 
    } 
    .bs-example button{ 
     margin: 10px; 
</style> 
</head> 
<body> 
<div class="bs-example"> 
    <button type="button" class="btn btn-primary" data-toggle="popover">Popover with image</button> 
</div> 
</body> 
</html>

Quelle

2016-09-24 03:38:18

Bootstrap Hover Bild Display Beispiel

Antwort

Verwandte Themen