Own*_*ner 4 tooltip twitter-bootstrap
我有一个选择框，其中的选项具有策略名称。我需要在选项的工具提示中显示策略的描述。我尝试了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/
请问有什么建议吗？
您必须在 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>
更新：添加代码片段
<!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>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});| 归档时间： |
|
| 查看次数： |
15556 次 |
| 最近记录： |