Saya mendesain halaman menggunakan Bootstrap 3. Saya mencoba menggunakan popover dengan placement: rightpada elemen input. Bootstrap baru memastikan bahwa jika Anda menggunakan form-controlAnda pada dasarnya memiliki elemen input lebar penuh.

Kode HTML terlihat seperti ini:

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

Lebar popover terlalu rendah, menurut saya karena tidak ada lebar yang tersisa di div. Saya ingin formulir input di sisi kiri, dan popover lebar di sisi kanan.

Sebagian besar, saya mencari solusi di mana saya tidak perlu mengganti Bootstrap.

JsFiddle terlampir. Opsi input kedua. Belum sering menggunakan jsfiddle jadi tidak tahu, tetapi cobalah meningkatkan ukuran kotak output untuk melihat hasilnya, pada layar yang lebih kecil bahkan tidak akan melihatnya. http://jsfiddle.net/Rqx8T/

Tingkatkan lebar dengan CSS

Anda dapat menggunakan CSS untuk menambah lebar popover Anda, seperti:

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

Jika ini tidak berhasil, Anda mungkin menginginkan solusi di bawah ini dan mengubah containerelemen Anda . ( Lihat JSFiddle )

Twitter bootstrap Container

Jika itu tidak berhasil, Anda mungkin perlu menentukan wadah:

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

Info lebih lanjut

Popover itu terkandung di dalam elemen yang dipicu. Untuk memperluas "lebar penuh" - tentukan wadah:

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

JSFiddle

Lihat JSFiddle untuk mencobanya.

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

Saya juga membutuhkan popover yang lebih luas untuk bidang teks pencarian. Saya datang dengan solusi Javascript ini (di sini di 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"))

Penanganannya ada di baris terakhir. Sebelum popover ditampilkan, opsi max-width diatur ke nilai kustom. Anda juga bisa menambahkan kelas khusus ke elemen tip.

Saya memiliki masalah yang sama. Habiskan waktu mencari jawaban dan temukan solusi saya sendiri: Tambahkan teks berikut di kepala:

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

Untuk mengubah lebar, Anda dapat menggunakan css

Untuk ukuran yang diinginkan tetap

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

Untuk lebar maks yang diinginkan:

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

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

Untuk mengubah lebar popover, Anda dapat mengganti template:

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

Untuk orang yang lebih suka solusi JavaScript. Di Bootstrap 4 tip () menjadi getTipElement () dan mengembalikan objek no jQuery. Jadi untuk mengubah lebar popover di Bootstrap 4 Anda dapat menggunakan:

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

Pada dasarnya saya meletakkan kode popover di baris div, bukan input div. Memecahkan masalah.

Dengan bantuan apa yang telah dijelaskan oleh @EML di atas tentang popover pada modal windows dan juga kode yang ditunjukkan oleh @ 2called-chaos, ini adalah bagaimana saya memecahkan masalah.

Saya memiliki ikon pada modal yang ketika diklik harus muncul

HTML saya

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

Skrip saya

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

Tidak ada solusi akhir di sini: / Hanya beberapa pemikiran bagaimana "bersih" menyelesaikan masalah ini ...

Versi terbaru (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" bukan class = "col-md-") dari JSFiddle asli Anda: http://jsfiddle.net/tkrotoff/N99h7/

Sekarang JSFiddle yang sama dengan solusi yang Anda usulkan : http://jsfiddle.net/tkrotoff/N99h7/8/
Tidak berfungsi: popover diposisikan relatif terhadap tanda <div class="col-*">+ bayangkan Anda memiliki beberapa input untuk <div class="col-*">...

Jadi jika kita ingin menjaga popover pada input (semantik lebih baik):

• .popover { position: fixed; }: tapi kemudian setiap kali Anda menggulir halaman, popover tidak akan mengikuti gulir
• .popover { width: 100%; }: tidak terlalu bagus karena Anda masih bergantung pada lebar induk (mis <div class="col-*">
• .popover-content { white-space: nowrap; }: bagus hanya jika teks di dalam popover lebih pendek dari max-width

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

Mungkin, menggunakan browser yang sangat baru, nilai lebar CSS baru dapat menyelesaikan masalah, saya tidak mencoba.

container: 'body'biasanya melakukan trik (lihat jawaban JustAnil di atas), tetapi ada masalah jika popover Anda berada dalam modal. The z-indextempat itu balik modal ketika popover yang melekat body. Ini tampaknya terkait dengan masalah BS2 5014 , tapi saya mendapatkannya di 3.1.1. Anda tidak dimaksudkan untuk menggunakan containerdari body, tetapi jika Anda memperbaiki kode untuk

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

maka Anda memperbaiki z-indexmasalahnya, tetapi lebar popover masih salah.

Satu-satunya perbaikan yang dapat saya temukan adalah menggunakan container: 'body'dan menambahkan beberapa css tambahan:

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

Perhatikan bahwa solusi css sendiri tidak akan berfungsi.

Anda dapat menggunakan atribut data-container = "body" dalam 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>

Inilah cara non-kopi untuk melakukannya dengan mengarahkan kursor:

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

Satu solusi teruji untuk Bootstrap 4 beta:

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

Bersama dengan pernyataan jQuery:

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

Catatan samping, data-container="body"atau container: "body"dalam HTML atau sebagai optionkepopover({}) objek tidak benar-benar melakukan trik [mungkin melakukan pekerjaan tetapi hanya bersama-sama dengan pernyataan CSS];

Juga, ingat bahwa Bootstrap 4 beta mengandalkan popper.js untuk posisi popover dan tooltipnya (sebelum itu tether.js)

Anda dapat menyesuaikan lebar popover dengan metode yang ditunjukkan di atas, tetapi hal terbaik yang harus dilakukan adalah menentukan lebar konten sebelum Bootstrap melihatnya dan melakukan perhitungannya. Misalnya, saya punya meja, saya mendefinisikan lebarnya, lalu bootstrap membuat popover yang sesuai. (Terkadang Bootstrap kesulitan menentukan lebar, dan Anda harus masuk dan memegang tangannya)

Saya menggunakan ini (berfungsi dengan baik):

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

Saya berakhir dengan mengatur lebar div "popover-content" ke nomor yang saya inginkan. (id atau kelas lain tidak akan berfungsi .....) Semoga Sukses!

  #popover-content{
      width: 600px;

  }

Anda juga dapat menambahkan data-container = "body" yang harus melakukan pekerjaan:

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

Anda dapat mengubah template popover Anda. Baik dengan data-template-atribut atau dengan bagian yang relevan di fungsi yang mengaturnya:

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

Untuk komponen naskah:

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

Di Angular ng-bootstrapAnda bisa dengan mudah container="body"ke kontrol yang memicu popover (seperti tombol atau kotak teks). Kemudian dalam file gaya global Anda ( style.cssatau style.scss) file yang harus Anda tambahkan .popover { max-width: 100% !important; }. Setelah itu, konten popover akan secara otomatis diatur ke lebar kontennya.

Dalam bootstrap 4 Anda cukup mengganti nilai default variabel bootstrap $popover-max-widthdi file styles.scss Anda seperti:

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

Lebih lanjut tentang mengganti bootstrap 4 default https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Pada Bootstrap 4, Anda dapat dengan mudah meninjau opsi templat, dengan menimpa lebar maks:

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

Ini adalah solusi yang baik jika Anda memiliki beberapa popover di halaman.

Coba ini:

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