twitter-bootstrap 选择框选项的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41359450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tooltip on select box options
提问by Owner
I have a select box in which the options have policy name. I need to display the description of policies in tool tip of the options. I tried tipr plugin where data-tip option is used for this. It works fine for div, span etc but not for select box option. I also tried normal method that I attached in the above link. This works only when the drop down is open by default .
我有一个选择框，其中的选项具有策略名称。我需要在选项的工具提示中显示策略的描述。我尝试了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/
http://jsfiddle.net/slolife/Dp4te/
Any suggestions please?
请问有什么建议吗？
回答by ustmaestro
You must specify a container for tooltip outside select, because tooltip is rendered inside select and is ignored by browser. As is specified in twitter bootstrap documentation tooltips are by default disabled you must enable it by yourself. http://getbootstrap.com/javascript/#four-directionsSee an working example below or https://jsfiddle.net/5xj10efa/
您必须在 select 外为工具提示指定一个容器，因为工具提示在 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>
Update: add a code snippet
更新：添加代码片段
$(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>