Html 选择选项标记示例上的Booststrap弹出框不起作用
我有一个要求，我必须在鼠标上方显示每个选项标题。 Bootstrap popover适用于相同格式的其他文本字段，但不适用于下拉列表 我在每个选项上都尝试了title attibute，它在chrome中工作，但在IE中悬停文本显示时间不够长，所以我决定使用Bootstrap 代码：Html 选择选项标记示例上的Booststrap弹出框不起作用,html,twitter-bootstrap,select,hover,option,Html,Twitter Bootstrap,Select,Hover,Option,我有一个要求，我必须在鼠标上方显示每个选项标题。 Bootstrap popover适用于相同格式的其他文本字段，但不适用于下拉列表 我在每个选项上都尝试了title attibute，它在chrome中工作，但在IE中悬停文本显示时间不够长，所以我决定使用Bootstrap 代码： <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<select id="testList">
<option value="1" title="Header1" data-toggle="popover" data-trigger="hover" style="color:red;">Item 1</option>
<option value="2" title="Header2" data-toggle="popover" data-trigger="hover"style="color:green;">Item 2</option>
<option value="3" title="Header3" data-toggle="popover" data-trigger="hover"style="">Item 3</option>
<option value="4" title="Header4" data-toggle="popover" data-trigger="hover" style="color:orange;">Item 4</option>
</select>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
引导示例
项目1
项目2
项目3
项目4
$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover（）；
});
有人能给我一个代码示例来显示鼠标悬停时的每个选项值吗？它可以是工具提示或弹出框 我们必须稍微调整一下才能让它正常工作。我们不能直接添加弹出选择选项。相反，我们可以在选择框上应用所选插件，它将选择选项转换为无序列表。除此之外，我们还可以在每个li元素上添加弹出窗口
$("#testList").chosen({
disable_search: true
});
$("testList_chosen.li.active-result").each(function(){
$(this).attr('data-toggle','popover');
});
$('[data-toggle="popover"]').popover({container: 'body'});