twitter-bootstrap Bootstrap 多个弹出框的显示和放置

Bootstrap multiple popover display and placement

提问by adam78

I have multiple form input and text fields on which I want a popover to display when the field is in focus. Since the content of some of the popovers can be lengthy I don't want to declare the content inside the input tag. Instead I have the following:

我有多个表单输入和文本字段，当字段处于焦点时，我希望在这些字段上显示一个弹出框。由于一些弹出窗口的内容可能很长，我不想在输入标签内声明内容。相反，我有以下内容：

<div class="form-group">
    <label for="name">Name</label>

    <input type="text" class="form-control js-tooltip-trigger" id="name" maxlength="50" >  

    <div class="js-tooltip" style="display: none;">
        <p><strong>Your name.</strong></p>
        <p>Enter your full name. This will be used ...</p>
    </div>
</div>

<div class="form-group">
    <label for="ref">Reference</label>

    <input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" >  

    <div class="js-tooltip" style="display: none;">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
   </div>
</div>

I have the following javascript

我有以下 javascript

$(function () {
   $('.js-tooltip-trigger').popover({
       html: true,
       trigger: 'focus',
       content: function () {
           return $(correct tool tip).html();
       }
   });
});

How can I get the correct popover to display or returned in the above javascript. What if I add a data attribute to the tool-tip content to link it to each input field e.g <div class="js-tooltip" style="display:none;" data-tooltip="name">and then use some jquery to find and return it. How would you do this with jquery? Does anyone have a more elegant solution?

我怎样才能在上面的javascript中获得正确的弹出框来显示或返回。如果我向工具提示内容添加一个数据属性以将其链接到每个输入字段，例如<div class="js-tooltip" style="display:none;" data-tooltip="name">，然后使用一些 jquery 查找并返回它，该怎么办。你会如何用 jquery 做到这一点？有没有人有更优雅的解决方案？

Also how do I get the popover to remain with the input field and auto position upon window resize. Currently it floats away when I resize the window.

另外，如何在调整窗口大小时让弹出框与输入字段保持一致并自动定位。目前，当我调整窗口大小时它会飘走。

Manage to figure it out myself using the above html:

设法使用上面的 html 自己弄清楚：

$(function () {
   $('.js-tooltip-trigger').popover({
       html: true,
       trigger: 'focus',
       content: function (e) {
           return $(this).parent(".form-group").find(".js-tooltip").html();
       }
   });
});

Can anyone think of a more elegant solution?

谁能想到一个更优雅的解决方案？

回答by sheshadri

You can do like this way...Here is the DEMO

你可以这样做......这是演示

Jquery Part

jQuery 部分

 $(function(){

    // Enabling Popover Example 1 - HTML (content and title from html tags of element)
    $("[data-toggle=popover]").popover();

    // Enabling Popover Example 2 - JS (hidden content and title capturing)
    $(".form-control").popover({
        html : true, 
        content: function() {
          return $('.js-tooltip').html();
        },
        title: function() {
          return $('.js-tooltip').html();
        }
    });


});

HTML Part

HTML 部分

<div class="form-group">
    <label for="name">Name</label>

    <input type="text" class="form-control js-popover-trigger" id="name" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your name" >  

    <div class="js-tooltip" style="display: none;" id="n1">
        <p><strong>Your name.</strong></p>
        <p>Enter your full name. This will be used ...</p>
    </div>
</div>

<div class="form-group">
    <label for="ref">Reference</label>

    <input type="text" class="form-control js-popover-trigger" id="ref" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your reference is optional">  

    <div class="js-tooltip" style="display: none;" id="t2">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
   </div>
</div>

回答by Ted

I'm not a fan of how this works, but essentially you have to create an element that stays in the position you want the popover , and append the popover to it. In this case, I have used the container you already have in place for the tooltip html. I'm creating container ID's dynamically so you don't have to worry about doing that in your html.

我不喜欢它是如何工作的，但本质上你必须创建一个元素，它保持在你想要 popover 的位置，并将 popover 附加到它。在这种情况下，我使用了工具提示 html 中已有的容器。我正在动态创建容器 ID，因此您不必担心在 html 中执行此操作。

So for this HTML:

所以对于这个 HTML：

<div class="form-group pos-relative">
    <label for="ref">Reference</label>
    <input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50">
    <span class="js-tooltip" style="display: none;">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
    </span>
</div>

This CSS:

这个CSS：

.pos-relative{
  position:relative;
}
.js-tooltip{
   position:absolute; 
   top:0;
   right:0;
}

And this JS--here's where it happens:

而这个 JS——这就是它发生的地方：

$(function () {

  $('.js-tooltip-trigger').each(function(ind, ele){

    var $ele = $(ele),
        $ttSpan = $ele.next('.js-tooltip'),
        ttHtml = $ttSpan.html(),
        rndID = 'ttid'+ String(Math.random()).substr(2);

    // set the ID, strip the style, and empty the html--
    // we already have it stored in the var above
    $ttSpan.attr('id', rndID).removeAttr('style').html('');

    // make the popovers
    $ele.popover({
        html: true,
        trigger: 'focus',
        placement: 'right',
        container: '#'+rndID, 
        content: ttHtml
    });

  });

});

See it in action here

在这里查看它的实际效果