选择框选项的工具提示答案

【问题标题】：Tooltip on select box options选择框选项的工具提示
【发布时间】：2018-05-16 10:48:47
【问题描述】：

我有一个选择框，其中选项具有策略名称。我需要在选项的工具提示中显示策略描述。我尝试了使用数据提示选项的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>

http://jsfiddle.net/slolife/Dp4te/

有什么建议吗？

【问题讨论】：

你可以用jquery ui selectmenu widget查看演示here
当鼠标悬停在选项上时，显示选项值。要求是应该显示选项的标题:-)
您可以使用标准引导工具提示来做到这一点，请参阅我的答案
感谢您在下面的解释和解决方案......但解决方案似乎需要为选择框指定“多个”。这不是最初的问题，也不是我的情况。有没有办法让选择保持在一个选择（和一排高度）但仍然使用你的#tooltip_container 解决方法？我可以只使用“标题”来获得工具提示，但它们看起来很糟糕，并且与我在其他元素上的其余 Bootstrap 工具提示不一致。感谢您再次查看@ustmaestro。

标签： twitter-bootstrap tooltip

【解决方案1】：

您必须在 select 之外为 tooltip 指定一个容器，因为 tooltip 在 select 内呈现并被浏览器忽略。正如 twitter bootstrap 文档中所指定的，工具提示默认情况下是禁用的，您必须自己启用它。 http://getbootstrap.com/javascript/#four-directions 请参阅下面的工作示例或https://jsfiddle.net/5xj10efa/

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

更新：添加代码sn-p

  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

【讨论】：

看起来这只适用于多选。常规选择忽略它