引導懸停圖像顯示示例

我試圖顯示一個簡單的圖像，當用戶懸停在鏈接上，即時跟隨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

引導懸停圖像顯示示例

回答

相關問題