使用CSS

Question

我正在使用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>

在我看来，弹出窗口宽度太低，因为它们不是div中剩下的任何宽度。我想要左侧的输入表格，右侧有一个宽的弹出窗口。

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

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

Answer 1

使用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元素。（View the JSFiddle）

Twitter bootstrap Container

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

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

Answer 2

我还需要一个更广泛的popover用于搜索文本字段。我提出了这个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选项设置为自定义值。您还可以在tip元素中添加自定义类。

Answer 3

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

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

Answer 4

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

需要固定尺寸

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

需要最大宽度：

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

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

Answer 5

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

$('#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>'
})

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

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

Answer 7

借助@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"); });

Answer 8

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

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

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

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

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

请参阅http://jsfiddle.net/tkrotoff/N99h7/11/

也许，使用最近的浏览器，new CSS width values可以解决问题，我没试过。

Answer 9

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

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

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

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

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

请注意，css解决方案本身无法正常工作。

Answer 10

您可以使用属性data-container =＆＃34; body＆＃34;在popover中

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

Answer 11

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

{{1}}

Answer 12

对于喜欢JavaScript解决方案的人。在 Bootstrap 4 tip（）成为getTipElement（），它返回一个没有jQuery对象。因此，为了在Bootstrap 4中更改弹出窗口的宽度，您可以使用：

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

Answer 13

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

Answer 14

 <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＆＃34; popover-content＆＃34;宽度到我想要的数字。（其他ids 或者班级不会工作.....）祝你好运！

  #popover-content{
      width: 600px;

  }

Answer 15

我用过这个（工作正常）：

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

Answer 16

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

var mymap = L.map('map').setView([47.25, 11.39], 14)

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);

var markers = L.markerClusterGroup();
var geoJsonLayer;

    shp("natur/RNA_NSGEBPolygon").then(function(geojson){
        //do something with your geojson
        console.log(geojson);

    geoJsonLayer = L.geoJSON(geojson, {

            filter: function(feature, layer) {
                if(feature.properties){ 
                    return true;
                }//End if
            },//end filter
            onEachFeature: function(feature, layer){
                layer.bindPopup(feature.properties.NAME);
            }

        })//end L.geojson
        //.addTo(mymap);

    markers.addLayer(geoJsonLayer);
    mymap.addLayer(markers);
    mymap.fitBounds(markers.getBounds());

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

Answer 17

你也可以添加data-container =＆＃34; body＆＃34;应该做的工作：

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

Answer 18

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

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

与jQuery语句一起：

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

HTML中的data-container="body"或container: "body"或option对象的popover({})并没有真正做到这一点[可能会有效但是只与CSS声明一起使用];

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

Answer 19

对于打字稿组件：

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})

Answer 20

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

Answer 21

您可以更改弹出框的模板。要么带有data-template属性，要么带有设置它的函数中的相关部分：

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

Answer 22

在引导程序4中，您可以像下面这样简单地在styles.scss文件中覆盖引导程序变量$popover-max-width的默认值：

$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";

有关覆盖引导程序4默认值https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

的更多信息

Answer 23

试试这个：

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

更改Bootstrap popover的宽度

23 个答案:

使用CSS

Twitter bootstrap Container

更多信息

的jsfiddle

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