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

我有要求，我必须在鼠标悬停时显示每个选项标题。 Bootstrap弹出窗口对同一表单中的其他文本字段起作用，但不适用于下拉菜单。选择选项标记示例上的Booststrap弹出窗口不起作用

我试过每个选项的标题attibute，它在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>

在这里，我不能选择标签使用大小属性

任何人都可以找出原因不能正常工作

或

莫非有些人给我使用代码示例在鼠标悬停上显示每个选项的值。它可以是工具提示或弹出窗口。

来源

2016-02-28 no_lyf_programmer

我们必须稍微调整一下才能使其工作。我们无法直接添加弹出式选择选项。相反，我们可以在选择框中应用所选插件，它将选择选项转换为无序列表。最重要的是，我们可以在每个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/

来源

2016-04-26 00:19:59

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

回答

相关问题