Projektuję stronę za pomocą Bootstrap 3. Próbuję użyć popover z placement: rightelementem wejściowym. Nowy Bootstrap zapewnia, że ​​jeśli używasz, form-controlto zasadniczo masz element wejściowy o pełnej szerokości.

Kod HTML wygląda mniej więcej tak:

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

Moim zdaniem szerokość popovera jest zbyt niska, ponieważ nie ma żadnej szerokości w div. Chcę formularz wejściowy po lewej stronie i szeroki popover po prawej stronie.

Głównie szukam rozwiązania, w którym nie muszę zastępować Bootstrap.

Załączony JsFiddle. Druga opcja wprowadzania. Nie korzystałem często z jsfiddle, więc nie wiem, ale spróbuj zwiększyć rozmiar pola wyjściowego, aby zobaczyć wyniki, na mniejszych ekranach nawet go nie zobaczą. http://jsfiddle.net/Rqx8T/

Zwiększ szerokość za pomocą CSS

Możesz użyć CSS, aby zwiększyć szerokość swojego popovera:

/* 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 containerelement. ( Zobacz JSFiddle )

Kontener bootstrap na Twitterze

Jeśli to nie zadziała, prawdopodobnie musisz określić 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, w którym jest uruchamiany. Aby go rozszerzyć na „pełną szerokość” - określ 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 także szerszego okna popover dla pola tekstowego wyszukiwania. Wymyśliłem to 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 ostatnim wierszu. Przed wyświetleniem okna podręcznego opcja maksymalnej szerokości jest ustawiana na wartość niestandardową. Możesz także dodać niestandardową klasę do elementu tip.

Miałem ten sam problem. Sporo czasu szukałem 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żesz użyć css

Poszukiwany stały rozmiar

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

Dla maksymalnej pożądanej szerokości:

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

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

Aby zmienić szerokość okna popover, możesz zastąpić 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>'
})

Dla osób, które wolą rozwiązanie JavaScript. W Bootstrap 4 tip () stał się getTipElement () i zwraca obiekt no jQuery. Aby więc zmienić szerokość popovera w Bootstrap 4, możesz użyć:

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

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

Zasadniczo wstawiam kod popover do div wiersza, zamiast div wejścia. Rozwiązać problem.

Z pomocą tego, co @EML opisał powyżej w odniesieniu do popover w oknach modalnych, a także kodu pokazanego przez @ 2called-chaos, w ten sposób rozwiązałem problem.

Mam ikonę modalu, która po kliknięciu powinna wyskakować

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

Nie ma tutaj ostatecznego rozwiązania: / Kilka myśli, jak „czysto” rozwiązać ten 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 proponowanym rozwiązaniem : http://jsfiddle.net/tkrotoff/N99h7/8/
To nie działa: popover jest ustawiony względem <div class="col-*">+ wyobraź sobie, że masz wiele danych wejściowych 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ę, popover nie będzie podążał za przewijaniem
• .popover { width: 100%; }: niezbyt dobre, ponieważ nadal zależysz od szerokości rodzica (tj <div class="col-*">
• .popover-content { white-space: nowrap; }: dobre tylko wtedy, gdy tekst w oknie popover jest krótszy niż max-width

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

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

container: 'body'normalnie robi lewę (patrz odpowiedź JustAnil powyżej), ale jest problem, jeśli twój popover jest w trybie modalnym. W z-indexumieszcza go za w modalnym gdy popover podłączona do body. Wydaje się, że jest to związane z problemem BS2 5014 , ale dostaję to w wersji 3.1.1. Chyba nie ma na celu używać containerz body, ale jeśli naprawić kod do

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

wtedy rozwiązujesz z-indexproblem, ale szerokość popover jest nadal nieprawidłowa.

Jedyną poprawką, jaką mogę znaleźć, jest użycie container: 'body'i dodanie dodatkowego css:

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

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

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

Oto sposób na zrobienie tego bez użycia coffeescript:

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

Jedno przetestowane rozwiązanie dla Bootstrap 4 beta:

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

Wraz z instrukcją jQuery:

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

Side-uwaga, data-container="body"lub container: "body"w formacie HTML lub jako optiondo popover({})obiektu nie naprawdę rade [być może wykonywać pracę, ale tylko razem z oświadczeniem CSS];

Pamiętaj też, że Bootstrap 4 beta opiera się na popper.js w zakresie popover i pozycjonowania podpowiedzi (wcześniej był to tether.js)

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

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

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

W końcu ustawiam szerokość div „popover-content” na żądaną liczbę. (inne identyfikatory lub klasa nie będą działać .....) Powodzenia!

  #popover-content{
      width: 600px;

  }

możesz także 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>

Możesz zmienić szablon swojego popovera. Albo z data-templateatrybutem, albo z odpowiednią częścią funkcji, która go konfiguruje:

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

W przypadku komponentu maszynopisu:

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

W Angular ng-bootstrapmożesz po prostu container="body"kontrolować element uruchamiający popover (taki jak przycisk lub pole tekstowe). Następnie w pliku ( style.csslub style.scss) stylu globalnym musisz dodać .popover { max-width: 100% !important; }. Następnie zawartość okna popover zostanie automatycznie ustawiona na szerokość treści.

W bootstrap 4 możesz po prostu zastąpić domyślną wartość zmiennej bootstrap $popover-max-widthw pliku styles.scss w następujący sposób:

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

Więcej informacji o zastępowaniu wartości domyślnych bootstrap 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

W Bootstrap 4 możesz łatwo przejrzeć opcję szablonu, zastępując maksymalną szerokość:

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

To dobre rozwiązanie, jeśli masz kilka okien pop-up na stronie.

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