Trigger bootstrap popover auf ausgewählten Hover

Question

Ich fragte mich, ob es möglich wäre, ein Popover beim Schweben über eine Auswahloption auszulösen. Der Grund dafür ist, dass ich ein wenig Informationen über diese spezielle Option zeigen möchte.

Ich habe den folgenden Code ausprobiert, aber es wird nicht funktionieren. Irgendwelche Ideen, wie ich darüber gehen könnte?

<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

Da die „Zeichnung“ von select Elementen teilweise durch das Betriebssystem durchgeführt wird, gibt es viele Dinge, die nicht möglich sind, mit ihnen zu tun (in Bezug auf Styling/events/etc), so ist es leider nicht möglich, Setzen Sie ein Ereignis für den Hover auf die <option> Elemente.

Was können Sie tun, ist es, einige js-lib verwenden, die <select> Element zu anderen HTML-Elemente übersetzen, die alle Styling haben kann/Ereignisse, die Sie benötigen:

Sie selectmenu zum Beispiel verwenden können (das ist Teil der jquery-ui Bibliothek):

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

Es gibt auch viele andere Bibliotheken, die Sie dafür verwenden können.