admin管理员组

文章数量:1333450

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:

User Clicks View Fleet

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.

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:

User Clicks View Fleet

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.

  • javascript
  • jquery
  • css
  • ajax
  • twitter-bootstrap
Share Improve this question edited Sep 24, 2016 at 3:02 Tim C asked Sep 24, 2016 at 2:57 Tim CTim C 5,7149 gold badges42 silver badges98 bronze badges 7
  • did you include tooltip plugin? – monkeyinsight Commented Sep 24, 2016 at 3:28
  • @monkeyinsight I did not...let me check quicky – Tim C Commented Sep 24, 2016 at 3:30
  • @monkeyinsight sorry if im being stupid here but I cant see the tooltip plugin... – Tim C Commented Sep 24, 2016 at 3:31
  • Popovers require the tooltip plugin to be included in your version of Bootstrap. – monkeyinsight Commented Sep 24, 2016 at 3:32
  • Are you getting any errors in console ? @TimothyCoetzee – Sathvik Chinnu Commented Sep 24, 2016 at 3:36
 |  Show 2 more ments

2 Answers 2

Reset to default 4

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./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./jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

Try this code instead that will help you to show an image on hover:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

本文标签： javascriptBootstrap hover image display exampleStack Overflow

版权声明：本文标题：javascript - Bootstrap hover image display example - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742352704a2458806.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。