将 Bootstrap 弹出框添加到 bootstrap-select 选择器

Question

我正在尝试向 Bootstrap-select 选择器添加弹出窗口，但结果很挑剔。我怎样才能可靠地做到这一点？

谢谢。

代码

我有一个JSBin的代码。以下是相关摘录：

Html

<body>
  <input class="" type="text" id="text" />
  <select id="select">
    <option>option1</option>
    <option>option1</option>
  </select> 
</body>

JavaScript

$("#select").selectpicker({selectOnTab: true, title: "My Title"});

$("button[data-id='select']")
//$(".bootstrap-select")
  .popover({title: "test", content: "test2", trigger: "focus", container: "body"});

问题

如果我使用 button[data-id='select'] 作为 selector，那么它可以工作，但是

当下拉菜单项具有焦点时，弹出窗口会消失，因为下拉菜单不包含在按钮中。
弹出窗口的 title 设置被 select 选择器的 title 设置覆盖。（看起来他们在 <button> DOM 节点上使用相同的字段。）

另一方面，如果我使用 .bootstrap-select 作为 selector，它可以完美地工作，但只有当存在一个 select 选择器时。

Answer 1

您可以将 select 包裹在 div 中并改为引用 div。

HTML

    <body>
    <input class="" type="text" id="text" />
    <div id="pop" style="display:inline-block">  
     <select id="select">
         <option>option1</option>
         <option>option1</option>
      </select> 
    </div>
    </body>

Javascript

$("#select").selectpicker({selectOnTab: true, title: "My Title"});   
$("#pop").popover({title: "test", content: "test2", trigger: "focus"});

务必在 div 上使用 style="display:inline-block"，否则 div 将填满屏幕，而不是 select 的宽度。
通过使用包装器 div，您将不会遇到标题问题。

link 到 jsbin：http://jsbin.com/letecaxafu/edit?html,js,output

将 Bootstrap 弹出框添加到 bootstrap-select 选择器

Add a Bootstrap popover to a bootstrap-select picker

twitter-bootstrap

bootstrap-select

代码

Html

JavaScript

问题

HTML

Javascript