I have a Bootstrap popover and I'm trying to put a table into it but then it doesn't show up when I click on it Therefore, I copied the code as it is by referring to this link
Putting table into Bootstrap popover
but the table contents do not appear In my opinion, I think the setting was wrong, so I inevitably attach the link that I set up jquery and bootstrap.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript">
$(function(){
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$("#popoverExampleTwo").popover({
html : true,
content: function() {
return $('#popoverExampleTwoHiddenContent').html();
},
title: function() {
return $('#popoverExampleTwoHiddenTitle').html();
}
});
});
</script>
<style>
.popover {
max-width: 600px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<title>Book</title>
</head>
<body>
<div class="span12" style="margin-top: 150px;width:100%">
<a tabindex="0" role="button" data-trigger="focus" class="btn-sm btn-info" data-placement="top" id="popoverExampleTwo"><i class="fa fa-comments" ></i> View</a>
<!-- Popover 2 hidden content -->
<div id="popoverExampleTwoHiddenContent" style="display: none">
<div>
<table border="1" style="width:100%">
<tr>
<th width="30%">Comment date</th>
<th width="70%">Comment</th>
</tr>
<tr>
<td>12/03/2015 16:45</td>
<td>*Username - Testing1</td>
</tr>
<tr>
<td>12/03/2015 16:55</td>
<td>*Username - Testing2</td>
</tr>
<tr>
<td>12/03/2015 17:13</td>
<td>*Username - Testing3</td>
</tr>
</table>
</div>
</div>
<!-- Popover 2 hidden title -->
<div id="popoverExampleTwoHiddenTitle" style="display: none">
Error comments
</div>
</div>
