引导悬停图像显示示例

我试图显示一个简单的图像，当用户悬停在链接上，即时跟随example found here字母，但我没有得到任何图像显示。引导悬停图像显示示例

我有以下UI，当用户点击查看车队数据被异步返回，并且该示例代码放置在脚本中返回的数据，从而：

用户点击查看舰队

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>

以上任何帮助或建议非常赞赏。

来源

2016-09-24 Timothy Coetzee

包括工具提示插件吗？ – monkeyinsight

@monkeyinsight我没有...让我快速检查 –

@monkeyinsight对不起，如果我在这里很愚蠢，但我不能看到工具提示插件... –

此代码工作：

加引导和jQuery
添加http：在乞讨的图片url incase你是没有服务器测试（只需在浏览器打开文件）没有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>

来源

2016-09-24 03:39:08

谢谢你做了一个小的调整，但得到它的工作 –

非常欢迎你:) –

试试这个代码，而不是将帮助你悬停时显示的图像：

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

来源

2016-09-24 03:38:18

引导悬停图像显示示例

回答

相关问题