Timothy Coetzee Timothy Coetzee - 2 months ago 10
CSS Question

Bootstrap hover image display example

Im trying to display a simple image when user hovers over link, im following the example found here to the letter,but im not getting any image displayed.

I have the following UI, when user clicks view fleet the data gets returned asynchronously, and the example code is placed within the script returning the data, thus:

enter image description here

User Clicks View Fleet

enter image description here

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>


Any help or advice on the above much appreciated.

Answer

This code is working :

  • add bootstrap and jquery
  • add http: at the begging of the image url incase you are testing without server ( just open the file at the browser ) without http request
<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>
Comments