213

我正在使用 Bootstrap 3 设计页面。我正在尝试placement: right在输入元素上使用弹出框。新的 Bootstrap 确保如果你使用form-control你基本上有一个全角输入元素。

HTML 代码如下所示：

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

在我看来，popovers 的宽度太低了，因为它们在 div 中没有任何宽度。我想要左侧的输入表单，右侧的宽弹出框。

大多数情况下，我正在寻找一种无需覆盖 Bootstrap 的解决方案。

附加的 JsFiddle。第二个输入选项。没有经常使用jsfiddle所以不知道，但是尝试增加输出框的大小以查看结果，在较小的屏幕上甚至看不到它。 http://jsfiddle.net/Rqx8T/

4

24 回答 24

365

使用 CSS 增加宽度

您可以使用 CSS 来增加弹出框的宽度，如下所示：

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

如果这不起作用，您可能需要以下解决方案并更改您的container元素。（查看 JSFiddle）

Twitter 引导容器

如果这不起作用，您可能需要指定容器：

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

更多信息

Twitter Bootstrap 弹出框增加宽度

弹出框包含在触发它的元素中。为了“全宽”扩展它 - 指定容器：

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

JSFiddle

查看 JSFiddle 进行尝试。

JSFiddle：http://jsfiddle.net/xp1369g4/

于 2014-03-17T16:29:14.283 回答
39

我还需要一个更宽的弹出框用于搜索文本字段。我想出了这个 Javascript 解决方案（在Coffee中）：

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

解决方法在最后一行。在显示弹出框之前，max-width 选项设置为自定义值。您还可以将自定义类添加到提示元素。

于 2014-03-12T16:44:12.560 回答
39

我有同样的问题。花了很长时间寻找答案并找到了我自己的解决方案：在头部添加以下文本：

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>
于 2014-07-08T20:47:17.120 回答
30

要更改宽度，您可以使用 css

对于固定尺寸想要

.popover{
    width:200px;
    height:250px;    
}

对于想要的最大宽度：

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle：http: //jsfiddle.net/Rqx8T/2/

于 2013-10-18T12:08:07.453 回答
18

要更改弹出框宽度，您可以覆盖模板：

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})
于 2014-07-09T07:34:29.270 回答
9

对于喜欢 JavaScript 解决方案的人。在Bootstrap 4中，tip() 变成了 getTipElement()，它返回一个无 jQuery 对象。因此，为了更改 Bootstrap 4 中弹出框的宽度，您可以使用：

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});
于 2018-01-15T23:42:33.033 回答
6 
<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

基本上我将弹出框代码放在行 div 中，而不是输入 div 中。解决了这个问题。

于 2013-10-26T08:00:43.637 回答
6

借助@EML 上面描述的关于模态窗口上的弹出窗口以及@2called-chaos 显示的代码，这就是我解决问题的方法。

我在模式上有一个图标，点击它时应该弹出

我的 HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

我的脚本

    $('[rel=popover]').popover({
        placement: 'bottom',
        html: 'true',
        container: '#name-of-modal-window .modal-body'
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
于 2015-03-11T08:50:11.213 回答
5

您可以在弹出窗口中使用属性 data-container="body"

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>
于 2016-12-22T13:29:48.057 回答
5

这是使用悬停的非咖啡脚本方式：

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});
于 2017-01-25T23:29:43.183 回答
4

这里没有最终解决方案：/只是一些想法如何“干净地”解决这个问题......

原始 JSFiddle 的更新版本（jQuery 1.11 + Bootstrap 3.1.1 + class="col-xs-" 而不是 class="col-md-"）：http: //jsfiddle.net/tkrotoff/N99h7/

现在与您提出的解决方案相同的 JSFiddle：http : //jsfiddle.net/tkrotoff/N99h7/8/
它不起作用：弹出框相对于<div class="col-*">+ 定位，假设您有多个相同的输入<div class="col-*">......

因此，如果我们想在输入上保留弹出框（语义上更好）：

  • .popover { position: fixed; }：但是每次滚动页面时，弹出窗口都不会跟随滚动
  • .popover { width: 100%; }：不是很好，因为你仍然依赖于父宽度（即<div class="col-*">
  • .popover-content { white-space: nowrap; }: 仅当弹出框内的文本短于max-width

见http://jsfiddle.net/tkrotoff/N99h7/11/

也许，使用最近的浏览器，新的 CSS 宽度值可以解决问题，我没有尝试。

于 2014-03-12T19:40:28.300 回答
4

container: 'body'通常可以解决问题（请参阅上面 JustAnil 的答案），但是如果您的弹出框处于模态，则会出现问题。当z-index弹出框附加到body. 这似乎与BS2 issue 5014有关，但我在 3.1.1 上得到它。您不打算使用containerof body，但如果您将代码修复为

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

然后你解决了这个z-index问题，但弹出框宽度仍然是错误的。

我能找到的唯一解决方法是使用container: 'body'并添加一些额外的 css：

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

请注意，css 解决方案本身不起作用。

于 2014-08-15T12:58:51.857 回答
3

Bootstrap 4 beta 的一种经过测试的解决方案：

.popover {
        min-width: 30em !important;
    }

连同 jQuery 语句：

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

旁注，data-container="body"或者container: "body"在 HTML 中或作为对象并没有真正做到option这popover({})一点[也许 do 工作，但只能与 CSS 语句一起使用]；

另外，请记住，Bootstrap 4 beta 依赖于popper.js的弹出框和工具提示定位（在此之前它是 tether.js）

于 2017-08-18T15:36:02.780 回答
2

您可以使用上述方法调整弹出框的宽度，但最好的办法是在 Bootstrap 看到并进行数学运算之前定义内容的宽度。例如，我有一张桌子，我定义了它的宽度，然后 bootstrap 构建了一个适合它的弹出框。（有时Bootstrap无法确定宽度，你需要介入并握住它的手）

于 2015-01-14T03:46:23.777 回答
2

我用这个（工作正常）：

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}
于 2016-08-12T09:41:46.977 回答
2 
 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

我最终将 div “popover-content” 宽度设置为我想要的数字。（其他 ids 或 class 不起作用.....）祝你好运！

  #popover-content{
      width: 600px;

  }
于 2018-01-24T03:32:39.150 回答
1

您还可以添加应该完成工作的 data-container="body" ：

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover"

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>
于 2014-08-18T15:18:42.587 回答
1

在 Bootstrap 4 上，您可以通过覆盖 max-width 轻松查看模板选项：

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

如果页面上有多个弹出框，这是一个很好的解决方案。

于 2020-04-14T14:31:41.810 回答
1

当我想更改特定弹出框的宽度时，我为Bootstrap 5+找到了这个解决方案。添加一个customClass对我有用的：

html:

<button class="btn btn-outline-secondary"  id="popover-help" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
   <i class="fa fa-question-circle"></i>
</button>

<div id="popover-help-container" style="display: none;">
    <h4 style="text-align: left;"> How to:</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum ultricies elit, mattis egestas nisl suscipit ac. Duis ipsum augue, convallis sed nunc in, pellentesque luctus elit. Duis porttitor massa sed finibus rutrum. Nunc eu risus ultrices, volutpat leo eget, pulvinar eros. Donec rhoncus mattis sem, ac iaculis turpis semper non. Cras dapibus tristique risus, eu tincidunt elit condimentum fermentum. Nunc at dignissim ante, nec efficitur felis. Duis mauris magna, fermentum eu egestas vel, vehicula at est. Nullam dapibus nisi non purus pellentesque ultrices. Nulla pulvinar neque quis ipsum semper, a congue tortor aliquet. Suspendisse vulputate porttitor feugiat. Maecenas pretium porta mauris feugiat pellentesque. Integer tempus risus eu pretium consectetur.

Donec interdum, eros ac imperdiet pretium, magna risus laoreet tellus, in finibus justo sapien et lacus. Pellentesque placerat ligula at metus sollicitudin, et convallis nisi luctus. Vivamus non arcu vel ex pharetra auctor. Morbi efficitur sed turpis id finibus. Sed porttitor luctus quam sed laoreet. Nunc facilisis finibus aliquet. Maecenas pellentesque sem dui, sed blandit tortor placerat ut. Donec tempor ipsum in sem fermentum, vel vulputate magna egestas.</p>
</div>

JS：

<script type="text/javascript">
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popover-help"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl,{
        content: function() {
                return $('#popover-help-container').html();
            },
        html: true,
        placement: 'bottom',
        sanitize: false,
        customClass: 'popover-large'
        });
    })
</script>

CSS：

.popover-large {
  max-width: 50%; /* Max Width of the popover (depending on the container!) */
}
于 2022-01-19T10:43:54.983 回答
1

您可以更改弹出框的模板。使用data-template-attribute 或设置它的函数中的相关部分：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
  </body>
</html>

于 2019-11-06T12:39:57.130 回答
0

在 Angularng-bootstrap中，您可以简单地container="body"对触发弹出框的控件（例如按钮或文本框）进行操作。然后在您的全局样式文件（style.css或style.scss）文件中，您必须添加.popover { max-width: 100% !important; }. 之后，弹出框的内容将自动设置为其内容宽度。

于 2019-10-29T15:44:31.630 回答
0

$popover-max-width在 bootstrap 4 中，您可以简单地在您的 styles.scss 文件中覆盖 bootstrap 变量的默认值，如下所示：

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

更多关于覆盖 bootstrap 4 默认值https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

于 2019-11-18T02:28:10.420 回答
0

对于打字稿组件：

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})
于 2019-01-26T23:29:26.930 回答
-2

尝试这个：

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));
于 2015-08-12T09:41:54.597 回答