Mengubah lebar popover Bootstrap


192

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/

Jawaban:


343

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

Twitter Bootstrap meningkatkan lebar popover

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/


1
+1, tetapi tidak akan / tidak berfungsi jika popover Anda ada dalam modal: lihat jawaban saya di bawah ini.
EML

2
Jawaban di atas adalah TLDR untuk saya, tetapi berisi cuplikan jenius ini yang memecahkan lebar dan masalah menangkap semua popover:$('[data-toggle="popover"]').popover({ container: 'body' });
Gregory Cosmo Haun

2
Saya harus menambahkan!important
Peter Ehrlich

Anda dapat menggunakan atribut data yang lebih rapi: data-container="body"pada elemen
stephen

@ surfer190 Lebih rapi pada basis per-popover, tetapi berantakan jika Anda ingin setiap popover memilikinya container: "body".
Chris Cirefice

39

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.


28
Jika Anda bukan pengguna kopi, ini adalah baris terakhir yang sama dengan js biasa:.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });
Colin

1
Apa itu .tip ()? Mengapa menggunakan .data ()? XD Saya tidak begitu mengerti hal ini, tetapi berhasil! Saya suka solusi ini lebih baik daripada menulis CSS baru untuk menggantikan default max-width. Terima kasih atas solusi ini! Btw bukannya "600px", saya atur ke "none". Itu lebih baik untukku.
Taufik Nur Rahmanda

36

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>

1
Anda mungkin perlu menambahkan! Penting untuk mengganti pengaturan default bootstrap.
John Creamer

29

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/


2
Itu pertama-tama akan mengubah lebar popover di seluruh situs. Tapi memang menemukan jawaban. Lebih tepatnya solusinya, posting sekarang.
mayankbatra

@ Peter, saya tidak dapat mereproduksi masalah Anda, saya pikir Anda hanya lupa untuk menambahkan penempatan data ke input Anda ...
BENARD Patrick

@ Benard Saya mengalami masalah yang sama, solusi Anda bekerja untuk menurunkan lebar maks dari 276px. Tetapi jika Anda akan mencoba mengubah max-width lebih dari itu maka tidak akan berubah.
Hardik Patel

18

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

1
tidak bekerja untuk saya .. saya diminta untuk menambah max-width: 500pxgaya juga.
cronfy

7

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

Ini berhasil bagi saya, namun hanya ketika pengaturan widthtidakmax-width
Deano

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>

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


tidak bekerja untuk saya. Saya memang berharap itu bekerja :( Aneh
t.durden

6

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

4

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.


4

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.


1
Memberi +1 mengganggu ketika popover muncul di belakang modal. Saya mengalami masalah yang sama dengan direktif bootstrap sudut-ui menggunakan tooltip dengan tooltip-append-to-body, itu muncul di belakang modal dan modal 'abu-abu' latar belakang.
Daryn

4

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>

4

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

3

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)


2

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)


2

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

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

  }

1

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>

wow ... jawab pertanyaan aslinya juga. Bersihkan dan tidak mengesampingkan bootstrap.
Johnathan Elmore

bagaimana cara mengubah lebar popover?
t.durden

1

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>


0

Untuk komponen naskah:

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

0

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.


0

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


0

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.


-2

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

Ini tidak akan berfungsi karena baris terakhir. Parsing integer sebagai nilai untuk lebar akan menyebabkan CSS rusak. Sebagai gantinya Anda harus mencoba: $('.popover').css('width', popover_size + 'px');Karena popover_size diuraikan sebagai integer. Hal lain adalah bahwa: popover_size = ((parseInt(string[0])+350));Akan menambah lebar ekstra.
Todor Todorov
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.