javascript - Bootstrap 悬停图像显示示例

Question

我试图在用户将鼠标悬停在链接上时显示一个简单的图像，我正在关注 example found here字面意思，但我没有显示任何图像。

我有以下 UI，当用户单击查看车队时，数据会异步返回，示例代码放在返回数据的脚本中，因此:

用户点击查看车队

代码

$('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: 在图像 url 的开头，以防你 没有服务器测试(只需在浏览器中打开文件)没有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>