引导多个弹出窗口显示和放置

Bootstrap multiple popover display and placement

本文关键字：显示 窗口      更新时间：2023-09-26

我有多个表单输入和文本字段，我希望在字段处于焦点时弹出窗口显示。由于一些弹出窗口的内容可能很长，所以我不想在输入标记中声明内容。取而代之的是:

<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 

$(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实现这一点呢?有人有更优雅的解决方案吗?

我如何让弹出窗口保持输入字段和自动位置在窗口调整大小。当前，当我调整窗口大小时，它会飘走。

我自己用上面的html:

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

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

你可以这样做…

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>

我不是这个工作方式的粉丝，但本质上你必须创建一个元素，保持在你想要弹出窗口的位置，并将弹出窗口追加到它。在本例中，我使用了已经为工具提示html准备好的容器。我是动态创建容器ID的所以你不必担心在你的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>
这个CSS

: 

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

这个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
    });
  });
});

相关文章：