Zwiększ Szerokość za pomocą CSS

Możesz użyć CSS, aby zwiększyć szerokość wyskakującego okienka, w następujący sposób:

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

Jeśli to nie zadziała, prawdopodobnie potrzebujesz rozwiązania poniżej i zmień swój element container. ( Zobacz JSFiddle )

Twitter Bootstrap Container

Jeśli to nie zadziała, prawdopodobnie musisz podać kontener:

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

Więcej Informacji

Popover jest zawarty w elemencie, który jest wyzwalany do środka. Aby rozszerzyć go" na całą szerokość " - podaj kontener:

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

JSFiddle

Zobacz JSFiddle, aby go wypróbować.

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

Potrzebowałem również szerszego okienka wyskakującego dla pola tekstowego wyszukiwania. Wymyśliłem takie rozwiązanie Javascript (tutaj w 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"))

Obejście znajduje się w ostatniej linii. Przed wyświetlaniem wyskakującego okienka opcja maksymalna szerokość jest ustawiana na wartość niestandardową. Możesz również dodać klasę niestandardową do elementu końcówki.

Miałem ten sam problem. Spędziłem trochę czasu szukając odpowiedzi i znalazłem własne rozwiązanie: Dodaj następujący tekst do głowy:

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

aby zmienić szerokość można użyć css

Dla szukanego rozmiaru

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

Dla maksymalnej szerokości poszukiwanej:

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

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

Aby zmienić szerokość wyskakującego okienka, możesz nadpisać szablon:

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

Z pomocą tego, co @EML opisał powyżej dotyczące popover na modalnych oknach, a także kod pokazany przez @2called-chaos, to jest jak rozwiązać problem.

Mam ikonkę na modalu, która po kliknięciu powinna wyskakiwać

Mój 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>

Mój Skrypt

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

No final solution here : / Just some thoughts how to "cleanly" solve this problem...

Zaktualizowana wersja (jQuery 1.11 + Bootstrap 3.1.1 + class="col-XS-" zamiast class="col-md-") oryginalnego JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Teraz ten sam JSFiddle z Twoim proponowanym rozwiązaniem: http://jsfiddle.net/tkrotoff/N99h7/8/
To nie działa: popover jest umieszczony względem <div class="col-*"> + wyobraź sobie, że masz wiele wejścia dla tego samego <div class="col-*">...

Więc jeśli chcemy zachować popover na wejściach (semantycznie lepiej):

• .popover { position: fixed; }: ale wtedy za każdym razem, gdy przewijasz stronę, wyskakujące okienko nie będzie podążać za przewijaniem
• .popover { width: 100%; }: nie tak dobrze, ponieważ nadal zależy od szerokości rodzica (tj.]}
• .popover-content { white-space: nowrap; }: dobre tylko wtedy, gdy tekst wewnątrz wyskakującego okienka jest krótszy niż max-width

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

Być może, używając bardzo niedawnego przeglądarki, nowe wartości szerokości CSS mogą rozwiązać problem, nie próbowałem.

container: 'body' normalnie robi sztuczkę (zobacz odpowiedź Justanila powyżej), ale jest problem, jeśli popover jest w modalu. z-index umieszcza go ZA modalem, gdy popover jest dołączony do body. Wydaje się, że jest to związane z BS2 issue 5014, ale mam go na 3.1.1. Nie powinieneś używać container z body, ale jeśli naprawisz kod na

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

Następnie naprawiasz problem z-index, ale szerokość wyskakującego okienka jest nadal nieprawidłowa.

Jedyną poprawką, którą mogę znaleźć, jest użycie container: 'body' i dodać jakiś dodatkowy css:

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

Zauważ, że rozwiązania css same w sobie nie będą działać.

Możesz użyć atrybutu data-container=" body " wewnątrz 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>

Możesz dostosować szerokość wyskakującego za pomocą metod wskazanych powyżej, ale najlepiej jest zdefiniować szerokość zawartości, zanim Bootstrap zobaczy i wykona swoją matematykę. Na przykład miałem tabelę, zdefiniowałem jej szerokość, a następnie bootstrap zbudował popover, aby go dopasować. (Czasami Bootstrap ma problem z określeniem szerokości i musisz wejść i trzymać go za rękę)

Oto nie-coffeescriptowy sposób na zrobienie tego z 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"
    });
  });
});

Możesz również dodać data-container= "body", który powinien wykonać zadanie:

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

Użyłem tego (działa dobrze):

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

Dla osób preferujących rozwiązanie JavaScript. W Bootstrap 4 tip() stała się getTipElement () i zwraca obiekt no jQuery. Aby zmienić szerokość wyskakującego okienka w Bootstrap 4, możesz użyć:

}).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>

Kończę ustawiając szerokość div "popover-content" na żądaną liczbę. (inne identyfikatory albo klasa nie zadziała..... Powodzenia!

  #popover-content{
      width: 600px;

  }

Jeden testowany roztwór dla Bootstrap 4 beta:

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

Wraz z wyrażeniem jQuery:

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

Side-note, data-container="body" lub container: "body" w HTML lub jako option do popover({}) obiekt naprawdę nie zrobił sztuczki [może do działa, ale tylko razem z instrukcją CSS];

Pamiętaj również, że Bootstrap 4 beta opiera się na popperze.js za jego wyskakiwanie i pozycjonowanie podpowiedzi (wcześniej było to tether.js)

Spróbuj tego:

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