twitter-bootstrap 选择选项的工具提示或注释

Tooltip or comment for select options

提问by user1985273

Im using bootstrap select for my dropdowns. Im interested is it possible to add a comment or a tooltip for each option that would pop up immediatly when i hover my mouse over it? Each comment is about 20-30 words long so it dosent fit well into the list.

我在下拉菜单中使用引导选择。我感兴趣是否可以为每个选项添加评论或工具提示，当我将鼠标悬停在它上面时会立即弹出？每条评论大约有 20-30 个字长，因此它不适合放入列表中。

At the moment i just have the select element:

目前我只有选择元素：

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

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

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

回答by Abk

Take a look at this, it works well with bootstrap select. The bootstrap select is an unordered list of your select options.

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

$(".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"});
})

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

回答by nabanita

Try this. Working copy attached.

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

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

回答by grusl83

If you have long tooltips, or you want to use html within the tooltip:

如果您有很长的工具提示，或者您想在工具提示中使用 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>

I created a JSFiddle: https://jsfiddle.net/15o0t2ju/1/

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

you can change data-placement="top" to bottom, left, right. check doc: https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

您可以将 data-placement="top" 更改为底部、左侧、右侧。检查文档：https: //www.w3schools.com/bootstrap/bootstrap_tooltip.asp

回答by v-stackOverFollower

Please see the below example for adding comment/tooltip for each option using 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>