最初のリストではポップオーバーを正常に表示できますが、2 番目のリストでは表示に問題があります。
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bootstrap Skeleton - jsFiddle demo by herlambangpermadi</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<style type="text/css">
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin: 40px;
}
</style>
</head>
<body>
<select class="btn typeahead dropdown-toggle" autofocus width="10" size="4" id="testList2">
<option value="1" data-title="This is item 1." data-content="Lots of stuff to say 1" style="color:red;">Item 1</option>
<option value="2" data-title="This is item 2." data-content="Lots of stuff to say 2" style="color:green;">Item 2</option>
</select>
<?php
require_once 'settings.php';
$db = mysql_connect($dbHost,$dbUser,$dbPass);
mysql_select_db($dbname,$db);
$sql = mysql_query("SELECT * FROM adminklasifier");
while($row = mysql_fetch_array($sql)) {
$clsfr = $row['klasifier'];
$sql = mysql_query("SELECT * FROM adminklasifier");
echo '<select id="testList" name="cmake" class="" autofocus width="10">';
echo '<option value="0" data-title="This is item 1." data-content="Lots of stuff to say 1">-Pilih Domain Klasifikasi-</option>';
while($row = mysql_fetch_array($sql)) {
echo '<option ' . ($clsfr==$row['klasifier']) . ' value="'.$row['klasifier'].'"'.(($_POST['cmake'] == $row['klasifier']) ? 'selected=selected' : NULL).'>'.$row['klasifier'].'</option>';
}
echo '</select>';
}
?>
</body></html>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$("#testList").on('mouseleave', function(e) {
$('#testList').popover('destroy');
});
$("#testList").on('mouseover', function(e) {
var $e = $(e.target);
if ($e.is('option')) {
$('#testList').popover('destroy');
$("#testList").popover({
trigger: 'manual',
placement: 'right',
title: $e.attr("data-title"),
content: $e.attr("data-content")
}).popover('show');
}
});
$("#testList2").on('mouseleave', function(e) {
$('#testList2').popover('destroy');
});
$("#testList2").on('mouseover', function(e) {
var $e = $(e.target);
if ($e.is('option')) {
$('#testList2').popover('destroy');
$("#testList2").popover({
trigger: 'manual',
placement: 'right',
title: $e.attr("data-title"),
content: $e.attr("data-content")
}).popover('show');
}
});
});
</script>