选择悬停时触发引导弹出

Question

我只是想知道是否有可能触发弹出悬停在选择选项上的弹出。原因是我想显示一些关于这个特定选项的信息。

我试过下面的代码，但它不会工作。任何想法如何我可以去做呢？

<select data-toggle="select" class="form-control select select-default mrs mbm"> 
     <option value="0">My Profile</option> 
     <option value="1" id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">My Friends</option> 
     <option value="2">My Profile</option> 
     <option value="3">My Friends</option> 
</select> 

$('#popoverOption').popover({ trigger: "hover" }); 

Answer 1

由于select元素的一部分被操作系统做的“引”，有很多事情是不可能做与他们（与造型/事件/等），所以很遗憾这是不可能的在<option>元素上设置悬停事件。

你可以做的是使用一些JS-lib的是<select>元素翻译成其他HTML元素可以拥有所有定型/你需要的事件：

可以使用selectmenu例如（这是部分jquery-ui库）：

$(function() { 
 
    $('#s1').selectmenu({ 
 
     focus: function(ev, ui) { 
 
      $('#content').html(ui.item.value + ' was hovered'); 
 
     } 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<div id="content">&nbsp;</div> 
 
<select name="s1" id="s1"> 
 
    <option>op1</option> 
 
    <option>op2</option> 
 
    <option selected="selected">op3</option> 
 
    <option>op4</option> 
 
</select>

还有你可以使用许多其他库。