Fatal编程技术网

Twitter bootstrap 选择框选项上的工具提示

twitter-bootstrap

Twitter bootstrap 选择框选项上的工具提示,twitter-bootstrap,tooltip,Twitter Bootstrap,Tooltip,我有一个选择框，其中的选项具有策略名称。我需要在选项的工具提示中显示策略的描述。我尝试了使用数据提示选项的tipr插件。它适用于div、span等，但不适用于选择框选项。我也尝试了正常的方法，我附加在上面的链接。仅当下拉列表默认打开时，此选项才起作用 <div> <h4>Default behaviours</h4> <select> <option title=""></option>

我有一个选择框，其中的选项具有策略名称。我需要在选项的工具提示中显示策略的描述。我尝试了使用数据提示选项的tipr插件。它适用于div、span等，但不适用于选择框选项。我也尝试了正常的方法，我附加在上面的链接。仅当下拉列表默认打开时，此选项才起作用

<div>
    <h4>Default behaviours</h4>
    <select>
        <option title=""></option>
        <option title="1">1</option>
        <option title="2">2</option>
        <option title="3">3</option>
        <option title="4">4</option>
    </select>

    <select multiple>
        <option title=""></option>
        <option title="1">1</option>
        <option title="2">2</option>
        <option title="3">3</option>
        <option title="4">4</option>
    </select>
</div>

<div>
    <h4 class='uitip' title='Tests with jQuery UI Tooltips applied'>jQuery UI tooltips</h4>
    <select class='uitip' title='has tooltips'>
        <option title=""></option>
        <option title="1">1</option>
        <option title="2">2</option>
        <option title="3">3</option>
        <option title="4">4</option>
    </select>

    <select multiple class='uitip' title='has tooltips'>
        <option title=""></option>
        <option title="1">1</option>
        <option title="2">2</option>
        <option title="3">3</option>
        <option title="4">4</option>
    </select>
</div>


违约行为
1.
2.
3.
4.
1.
2.
3.
4.
jQuery UI工具提示
1.
2.
3.
4.
1.
2.
3.
4.

有什么建议吗？

您必须为“选择”外部的工具提示指定一个容器，因为工具提示在“选择”内部呈现，浏览器会忽略它。 正如twitter引导文档中指定的那样，工具提示在默认情况下是禁用的，您必须自己启用它。 请参阅下面的工作示例或


选择1
选择2
选择3
选择4
备选案文5
备选案文6
您可以使用jquery ui
selectmenu小部件执行此操作
将鼠标悬停在选项上，显示选项值，同时选中演示。要求是应显示选项的标题：-）您可以使用标准引导工具提示执行此操作请参阅我的回答感谢您提供以下解释和解决方案…但解决方案似乎要求为选择框指定“多个”。这不是最初的问题，也不是我的处境。是否有一种方法可以将“选择”保留为一个选项（高度为一行），但仍使用“工具提示”容器解决方案？我可以只使用“标题”来获得工具提示，但它们看起来很糟糕，与其他元素的引导工具提示不一致。感谢您再次查看@ustmaestro。看起来这只适用于多个选择。常规选择会忽略它 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>
<body>
    <div class="container" style="margin-top:80px;">
        <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <select name="opts" id="opts" class="form-control" multiple>
                    <option value="1" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 1">option 1</option>
                    <option value="2" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 2">option 2</option>
                    <option value="3" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 3">option 3</option>
                    <option value="4" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 4">option 4</option>
                    <option value="5" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 5">option 5</option>
                    <option value="6" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 6">option 6</option>
                </select>
                <div id="tooltip_container"></div>
            </div>
            <div class="col-sm-4"></div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
              $('[data-toggle="tooltip"]').tooltip();
        });
    </script>

</body>
</html>