CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
user1038814
user1038814

Reputation: 9657

Trigger bootstrap popover on select hover

I just wondered if it would be possible to trigger a popover on hovering over a select option. The reason for this is I want to show a little information about that particular option.

I've tried the below code but it won't work. Any ideas how I may go about it?

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

Upvotes: 0

Views: 1392

Answers (1)

Dekel
Dekel

Reputation: 62546

Since the "drawing" of select elements is partially done by the OS, there are many things that are not possible to do with them (related to styling/events/etc), so unfortunately it's not possible to set an event for hover on the <option> elements.

What you can do is use some js-lib that translate <select> element to other html elements that can have all the styling/events that you need:

You can use selectmenu for example (which is part of the jquery-ui library):

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

There are also many other libraries you can use for that.

Upvotes: 1

Related Questions