Question

我试图在用户将鼠标悬停在链接上时显示一个简单的图像，我跟随example found 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>

对上述任何帮助或建议都非常感激。

Answer 1

此代码正常运行：

添加bootstrap和jquery
添加http：在图片网址的乞讨下，你是没有服务器测试（只在浏览器中打开文件）没有http请求

<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>

Answer 2

请尝试使用此代码，以帮助您在悬停时显示图片：

<!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>

Bootstrap悬停图像显示示例

2 个答案: