選擇懸停時觸發引導彈出

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>

還有你可以使用許多其他庫。