Question

我的表单中有一个下拉列表。

我希望在悬停每个选项时显示其标题属性值。

这里的问题是IE标题只显示5秒，但只要我将光标移出选项，预期的行为就会显示标题。

所以我使用了Bootstrap工具提示和弹出窗口，但是那些不能使用select选项元素。

代码：

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

我尝试了很多东西并经历了很多SOF Q＆amp;但是无法实现所需的功能。

Answer 1

$("select").hover(function (e)
{
     var $target = $(e.target); 
     if($target.is('option')){
         alert($target.attr("id"));//Will alert id if it has id attribute
         alert($target.text());//Will alert the text of the option
         alert($target.val());//Will alert the value of the option
     }
});

Answer 2

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

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

});

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

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

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

将文本悬停在选择选项上

2 个答案: