увеличить ширину с помощью CSS

вы можете использовать CSS для увеличения ширины вашего popover, например:

/* 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 bootstrap Container

если это не работает, вам, вероятно, нужно указать контейнер:

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

---

больше Информация

popover содержится в элементе, в котором он запускается. Чтобы расширить его "на всю ширину" - укажите контейнер:

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

мне также нужен более широкий поповер для текстового поля поиска. Я придумал это решение Javascript (здесь в кофе):

$(".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"))

решение находится в последней строке. Перед отображением popover параметр max-width устанавливается в пользовательское значение. Вы также можете добавить пользовательский класс в элемент tip.

У меня была та же проблема. Потратил довольно много времени на поиск ответа и нашел свое собственное решение: Добавить в заголовок следующий текст:

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

для изменения ширины вы можете использовать CSS

для фиксированного размера хотела

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

для максимальной ширины требуется:

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

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

чтобы изменить ширину popover вы можете переопределить шаблон:

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

С помощью того, что @EML описал выше относительно popover на модальных окнах, а также кода, показанного @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"); });

нет окончательного решения здесь :/ просто некоторые мысли, как "чисто" решить эту проблему...

обновленная версия (jQuery 1.11 + Bootstrap 3.1.1 + class="col-xs-" вместо class="col-md-") вашего оригинального JSFiddle:http://jsfiddle.net/tkrotoff/N99h7/

теперь тот же JSFiddle с вашим предлагаемое решение: http://jsfiddle.net/tkrotoff/N99h7/8/
Это не работает: popover расположен относительно <div class="col-*"> + представьте, что у вас есть несколько входов для одного и того же <div class="col-*">...

поэтому, если мы хотим сохранить popover на входах (семантически лучше):

• .popover { position: fixed; }: но тогда каждый раз, когда вы прокручиваете страницу, всплывающее окно не будет следовать за прокруткой
• .popover { width: 100%; }: не так хорошо, так как вы все еще зависите от родительской ширины (т. е. <div class="col-*">
• .popover-content { white-space: nowrap; }: хорошо, только если текст внутри popover короче, чем max-width

см.http://jsfiddle.net/tkrotoff/N99h7/11/

возможно, используя очень последние браузеры,новые значения ширины CSS может решить проблему, я не пробовал.

container: 'body' обычно делает трюк (см. ответ JustAnil выше), но есть проблема, если ваш popover находится в модальном режиме. Элемент z-index мест за модальный, когда поповер прикреплен к body. Это, кажется, связано с BS2 выпуск 5014, но я получаю его на 3.1.1. Вы не должны использовать container на body, но если вы исправите код на

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

тогда вы исправите z-index проблема, но ширина popover по-прежнему неправильный.

единственное, чем я могу найти-это использовать container: 'body' и добавить некоторые дополнительные CSS:

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

обратите внимание, что css-решения сами по себе не будут работать.

вы можете использовать атрибут data-container= "body" в 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>

вы можете настроить ширину поповера с помощью методов, указанных выше, но лучше всего определить ширину содержимого, прежде чем Bootstrap увидит и сделает свою математику. Например, у меня была таблица, я определил ее ширину, а затем bootstrap построил popover, чтобы удовлетворить его. (Иногда Bootstrap имеет проблемы с определением ширины, и вам нужно Войти и держать его за руку)

вот не-coffeescript способ сделать это с помощью hover:

$(".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"
    });
  });
});

вы также можете добавить 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>

я использовал это(работает нормально):

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

для людей, которые предпочитают решение JavaScript. В Bootstrap 4 tip() стал getTipElement () и возвращает объект no jQuery. Поэтому для того, чтобы изменить ширину окна в Bootstrap 4 Вы можете использовать:

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

 <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" на нужное мне число. (другие идентификаторы или класс не будет работать.....) Удачи!

  #popover-content{
      width: 600px;

  }

одно проверенное решение для 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({}) объект на самом деле не сделал трюк [может быть, сделать работу, но только вместе с оператором CSS];

кроме того, помните, что Bootstrap 4 beta полагается на поппер.js для его popover и tooltip позиционирования (до этого это был tether.js)

попробуйте это:

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