引导多个弹出窗口显示和放置 [英] Bootstrap multiple popover display and placement

问题描述

我有多个表单输入和文本字段，当该字段处于焦点位置时，我希望在其上显示一个弹出框.由于某些弹出窗口的内容可能很长，因此我不想在input标签内声明内容.相反，我有以下内容:

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>

我有以下javascript

I have the following javascript

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

如何获取正确的弹出式窗口，以在上述javascript中显示或返回.如果我在工具提示内容中添加数据属性以将其链接到每个输入字段，例如<div class="js-tooltip" style="display:none;" data-tooltip="name">，然后使用一些jquery查找并返回它，该怎么办?您将如何使用jquery做到这一点?有谁有一个更优雅的解决方案?

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?

我还如何使弹出窗口与输入字段一起保留，并在调整窗口大小时自动定位.目前，当我调整窗口大小时，它会浮动.

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.

使用上面的html自己找出答案:

Manage to figure it out myself using the above 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?

推荐答案

您可以这样操作... 这里是演示

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

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部分

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

这篇关于引导多个弹出窗口显示和放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！