Question

我使用bootstrap选择我的下拉列表。我感兴趣的是有可能为每个选项添加注释或工具提示，当我将鼠标悬停在它上面时会立即弹出吗？每个评论长约20-30个字，因此它很适合列表。

目前我只有选择元素：

<select class="selectpicker" multiple="">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
$('select').selectpicker();

http://jsfiddle.net/mfrup5bL/136/

Answer 1

看看这个，它适用于bootstrap select。引导选择是您选择选项的无序列表。

＆＃13;

$(".selectpicker").selectpicker()
var title = [];
$('#mySelect option').each(function(){
    title.push($(this).attr('title'));
});

$("ul.selectpicker li").each(function(i){
  $(this).attr('title',title[i]).tooltip({container:"#tooltipBox"});
})

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet"/>
<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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script>
    		<div class="col-sm-6" style="margin-top:10px;">
    				<select class="selectpicker form-control" id="mySelect" multiple>
    					<option title="Option 1">option one</option>
    					<option title="Option 2">option two</option>
    					<option  title="Option 3">Option three</option>
    					<option title="Option 4">Option four</option>
    					</select>
              <p id="tooltipBox" class="col-sm-6" style="z-index:9999;"></p>
    				</div>

＆＃13;

Answer 2

试试这个。随附工作副本。

<option value="1" title="Long description">Short desc...</option>

<select>
  <option value="1" title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">Short desc...</option>
  <option value="volvo" title="i AM a generic content">Volvo</option>
  <option value="saab" title="Long description">Saab</option>
  <option value="opel" title="Long description">Opel</option>
  <option value="audi" title="Long description">Audi</option>
</select>

举个例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <select class="form-control" id="myID" name="myID" data-toggle="tooltip" data-placement="top" data-html="true">
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option1</option>
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option2</option>
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option3</option>
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option4</option>
  </select>
</div>

Answer 3

如果您有长工具提示，或者您想在工具提示中使用html：

<div class="form-group">
<label for="myID">Test</label>
  <select class="form-control" id="myID" name="myID" data-toggle="tooltip" data-placement="top" data-html="true">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </select>
</div>

<script>
$('#myID').tooltip({'trigger':'focus', 'title': 'This is my tooltip. You can use <b>HTML</b>.'});
</script>

我创建了一个JSFiddle：https://jsfiddle.net/15o0t2ju/1/

您可以将data-placement =“top”更改为bottom，left，right。检查doc：https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Answer 4

请参阅以下示例，了解使用bootstrap为每个选项添加注释/工具提示。

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

<select class="selectpicker" multiple="">
<option value="option1" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option1">option1</option>
<option value="option2" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option2">option2</option>
<option value="option3" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option3">option3</option>
<option value="option4" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option4">option4</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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

选择选项的工具提示或注释

4 个答案: