如何在选择选择器禁用选项上添加标题（工具提示）？答案

【问题标题】：How to add title (tooltip) on selectpicker disabled option?如何在选择选择器禁用选项上添加标题（工具提示）？
【发布时间】：2016-07-27 06:52:35
【问题描述】：

我有一个 selectpicker 有多种语言，即<ul> 标签下的<li> 标签，如下图所示。

可以看到selectpicker的+添加语言li被禁用了。这是因为在实际的 html 中，<select> 的 option 被禁用，如下图所示

现在担心的是： selectpicker 选择选择选项并应用所有属性，但没有携带标题（可以在<select> 的<option> 值上看到；title="My Title"），同时将鼠标悬停在禁用的<li> 标签上。在我看来，这是因为 <li> 标签上的禁用类通过添加 ban 图标来覆盖标题行为。

请告诉我如何在使用选择选择器时启用此行为。我希望在将鼠标悬停在禁用选项上时显示标题。

编辑： 请参考代码 sn-p 以获得更好的理解。

<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet"/>
Language:
<select class="selectpicker">  
    <option>English</option>
    <option disabled title="My Title">+ Add Language</option>    
</select>

【问题讨论】：

我无法理解预期的结果是什么？如何title 看起来应该没有disabled 属性。你可以为此创建一个工作snippet吗？
预期的行为是当我将鼠标悬停在 + 添加语言上时，它应该向我显示工具提示我的标题以及禁止红色图标...
您是在使用工具提示库还是您的意思是本机浏览器工具提示？
本机浏览器工具提示。实际上，disabled 属性通过显示禁止红色图标来覆盖此功能。
我在li 或a 上看不到title 属性。未禁用的li 中是否有title 属性？

标签： jquery html css twitter-bootstrap bootstrap-selectpicker

【解决方案1】：

你可以使用属性data-content

来自文档：

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

使用此属性，您可以传递输出“模板”，在那里您可以设置title 属性。

<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet"/>

Language:
<select class="selectpicker">  
    <option data-content="<span title='English'>English</span>">English</option>
    <option disabled title="My Title" data-content="<span title='+ Add Language'>+ Add Language</span>">+ Add Language</option>    
</select>

【讨论】：

【解决方案2】：

根据顶部，这是我的代码：

<select class="selectpicker"> 
    <option value="add" data-content='<span data-toggle="tooltip" data-placement="bottom" title="My Tooltip Title">+ Add Language</span>'>+ Add Language</option>
</select>

【讨论】：