Bootstrap 选择选项标记示例上的Booststrap弹出框不起作用

rqmkfv5c 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(196)

我有要求，我必须显示每个选项的标题鼠标移过。引导弹出窗口是工作的其他文本字段在同一个形式，但不工作的下拉菜单。
我尝试了每个选项的标题属性，它是在 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.it可以是工具提示或弹出窗口。

twitter-bootstrap

来源：https://stackoverflow.com/questions/35689609/booststrap-popover-on-select-option-tag-example-is-not-working

1条答案

按热度按时间

pinkon5k1#

我们需要做一些调整。我们不能直接在选择选项上添加弹出。相反，我们可以在选择框上应用选择插件，它将选择选项转换为无序列表。在此之上，我们可以在每个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/

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 选择选项标记示例上的Booststrap弹出框不起作用

1条答案

相关问题

热门标签

最新问答