选择选项标记示例上的引导弹出窗口不起作用答案

【问题标题】：Booststrap popover on select option tag example is not working选择选项标记示例上的引导弹出窗口不起作用
【发布时间】：2016-02-28 23:26:43
【问题描述】：

我要求我必须在鼠标悬停时显示每个选项标题。 Bootstrap 弹出框适用于同一表单中的其他文本字段，但不适用于下拉菜单。

我在每个选项上都尝试了标题属性，它在 chrome 中工作，但在 IE 悬停文本中没有显示足够长的时间，所以我决定使用 Bootstrap。

代码：

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

这里我不能在选择标签上使用 size 属性

谁能找出不工作的原因

或

谁能给我一个代码示例来显示鼠标悬停时的每个选项值。它可以是工具提示或弹出框。

【问题讨论】：

标签： html twitter-bootstrap select hover option

【解决方案1】：

我们必须稍作调整才能使其正常工作。我们不能直接添加一个弹出框来选择选项。相反，我们可以在选择框上应用选择的插件，它将选择选项转换为无序列表。最重要的是，我们可以在每个 li 元素上添加弹出窗口。

$("#testList").chosen({                    
                    disable_search: true

});

$("testList_chosen.li.active-result").each(function(){
                $(this).attr('data-toggle','popover');
});

$('[data-toggle="popover"]').popover({container: 'body'});

在此处阅读有关所选插件的更多信息。 http://julesjanssen.github.io/chosen/

【讨论】：