Question

我正在尝试在选项的每个选项的右边显示toolttip，但不能。

 // tooltip select demo
$('#selectdemo option').tooltip();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

<select id="selectdemo">
    <option data-placement="right" data-toggle="tooltip" data-original-title="Tooltip on left 1" title="Tooltip on left 1">Tooltip on left 1</option>
    <option data-placement="right" data-toggle="tooltip" data-original-title="Tooltip on left 2" title="Tooltip on left 2">Tooltip on left 2</option>
</select>

我是否需要对选择选项更改事件进行特定测试？

Answer 1

显然它不起作用，请注意这个答案：https://stackoverflow.com/a/3275809/1102585

Jquery的Enter事件永远不会触发选项，这意味着您无法使用javascript触发<option>元素上的工具提示，但是，可以处理<select>上的输入事件并处理自己定位工具提示，这是公认的解决方案

或者，您也可以简单地删除$('#selectdemo option').tooltip();调用，因为title属性已在选项上添加了原生工具提示

Answer 2

您可以通过指定展示位置右上角，左上角来调用JS文件中的工具提示。这仅适用于选择而不是选项。这是一个有效的例子。 http://www.bootply.com/iT4kv5CRP9。
有一种方法可以使用多选选项。对于多个选项选择http://www.bootply.com/2MHfTUupNK
不确定它是否可以应用于单个选择选项。希望这可以帮助。

在html select选项上的Bootstrap 2工具提示

2 个答案: