Question

我要求我必须在鼠标悬停时显示每个选项标题。 Bootstrap popover正在以相同的形式处理其他文本字段，但不适用于下拉列表。

我在每个选项上尝试了标题属性，它在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>

我不能在select标签

上使用size属性

任何人都可以找出不工作的原因

或

有人可以给我一些代码示例来显示鼠标hover上的每个选项值。它可以是工具提示或弹出窗口。

Answer 1

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

$("#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/

选择选项标记示例上的Booststrap popover不起作用

1 个答案: