Bagaimana Anda mengubah lebar dan tinggi tooltips Twitter Bootstrap?

Saya membuat tooltip menggunakan Twitter Bootstrap.

Tip alat ditampilkan dengan tiga garis. Namun, saya ingin menampilkan tooltip hanya dengan satu baris.

Bagaimana cara mengubah lebar ujung alat? Apakah ini khusus untuk Bootstrap Twitter atau untuk tooltips sendiri?

Cukup ganti bootstrap.css

Nilai default di BS2 adalah max-width: 200px; Sehingga Anda dapat meningkatkannya dengan apa pun yang sesuai dengan kebutuhan Anda.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

Di BS3

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}

Saya menyadari ini adalah pertanyaan yang sangat lama, tetapi jika saya mendarat di sini, begitu juga yang lain. Jadi saya pikir saya menimbang.

Jika Anda ingin tooltip hanya responsif terhadap satu baris tanpa memperhatikan berapa banyak konten yang Anda tambahkan, lebar harus fleksibel. Namun, Bootstrap benar-benar memulai tooltip ke lebar, jadi Anda harus setidaknya menyatakan berapa lebar itu dan membuatnya fleksibel dari ukuran itu ke atas. Inilah yang saya rekomendasikan:

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

Yang min-widthmenyatakan ukuran awal. Berbeda dengan max-width, seperti yang disarankan beberapa orang, yang menyatakan lebar pemberhentian . Menurut pertanyaan Anda, Anda tidak boleh mendeklarasikan lebar akhir atau konten tooltip Anda pada akhirnya akan membungkus pada titik itu. Sebagai gantinya, Anda menggunakan lebar tak terbatas atau lebar fleksibel. max-width: 100%;akan memastikan bahwa setelah tooltip dimulai pada lebar 100px, itu akan tumbuh dan menyesuaikan dengan konten Anda terlepas dari jumlah konten yang Anda miliki di dalamnya.

TETAP DI PIKIRAN Tooltips tidak dimaksudkan untuk membawa banyak konten. Ini bisa terlihat funky jika Anda memiliki string panjang di seluruh layar. Dan itu pasti akan berdampak pada tampilan responsif Anda, khususnya smartphone (lebar 320px).

Saya akan merekomendasikan dua solusi untuk menyempurnakan ini:

1. Pertahankan konten tooltip Anda seminimal mungkin agar tidak melebihi lebar 320px. Dan bahkan jika Anda melakukan ini, Anda harus ingat jika Anda memiliki tooltip yang ditempatkan di kanan layar dan dengan data-placement:right, konten tooltip Anda tidak akan terlihat di smartphone (karenanya mengapa bootstrap awalnya dirancang mereka untuk responsif terhadap kontennya dan memungkinkannya untuk membungkus)
2. Jika Anda benar-benar ingin menggunakan konsep tooltip satu baris ini, maka tutup enam Anda dengan menggunakan @mediakueri untuk mereset tooltip Anda agar sesuai dengan tampilan smartphone. Seperti ini:

Demo saya DI SINI menunjukkan fleksibilitas dan daya tanggap pada tooltips sesuai dengan ukuran konten dan ukuran tampilan perangkat juga

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}

Anda harus menimpa properti menggunakan css Anda sendiri. seperti itu:

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

pemilih memilih div dimana tooltip dipegang (tooltip ditambahkan oleh javascript dan biasanya bukan milik wadah apa pun.

Tentukan lebar maksimum dengan "penting!" dan gunakan data-container = "body"

File CSS

.tooltip-inner {
    max-width: 500px !important;
}

Tag HTML

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

Skrip JS

$('.tooltiplink').tooltip();

Untuk memperbaiki masalah lebar, gunakan kode berikut sebagai gantinya.

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

contoh: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

Solusi lain; buat kelas baru (mis. tooltip-wide) di CSS:

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

Gunakan kelas ini pada elemen di mana Anda ingin tooltips lebar:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

Bootstrap tooltip menghasilkan markup di bawah elemen yang mengandung tooltip, sehingga HTML benar-benar terlihat seperti ini setelah markup dihasilkan:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>

CSS menggunakan ini untuk mengakses elemen yang berdekatan (+) ke .tooltip-wide, dan dari sana menavigasi ke .tooltip-inner, sebelum menerapkan atribut max-width. Ini hanya akan mempengaruhi elemen menggunakan kelas .tooltip-wide, semua tooltips lainnya akan tetap tidak berubah.

Anda dapat mengedit kelas .tooltip-inner css di bootstrap.css. Lebar maksimum default adalah 200px. Anda dapat mengubah lebar maks ke ukuran yang Anda inginkan.

setelah beberapa percobaan, ini bekerja paling baik untuk saya:

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}

Ganti saja default max-widthke apa pun yang sesuai dengan kebutuhan Anda.

.tooltip-inner {
  max-width: 350px;
}

Ketika max-width tidak berfungsi (opsi 1)

Jika max-width tidak berfungsi, Anda bisa menggunakan set width sebagai gantinya. Ini bagus, tetapi tooltips Anda tidak akan lagi mengubah ukuran agar sesuai dengan teks. Jika Anda tidak suka itu, lewati ke opsi 2.

.tooltip-inner {
  width: 350px;
}

Berurusan dengan benar dengan wadah kecil (opsi 2)

Karena Bootstrap menambahkan tooltip sebagai saudara target, ia dibatasi oleh elemen yang mengandung. Jika elemen yang mengandung lebih kecil dari Anda max-width, maka max-widthtidak akan berfungsi.

Jadi, ketika max-widthtidak berfungsi, Anda hanya perlu mengubah container:

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

Kiat Pro: wadah dapat berupa pemilih mana saja, yang bagus bila Anda hanya ingin mengganti gaya pada beberapa tooltips.

Atur kelas ke div tooltip utama dan untuk tooltip batin

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}

Silakan lihat posting di bawah ini. Jawaban cmcculloh bekerja untuk saya. https://stackoverflow.com/posts/31683500/edit

Seperti yang ditunjukkan dalam dokumentasi , cara termudah untuk memastikan bahwa tooltip Anda tidak membungkus sama sekali adalah menggunakan

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}

Dengan ini, Anda tidak perlu khawatir tentang nilai dimensi atau semacamnya. Masalah utama adalah jika Anda memiliki baris teks yang sangat panjang, teks itu hanya akan keluar dari layar (seperti yang Anda lihat pada Contoh JSBin ).

BS3:

.tooltip-inner { width:400px; max-width: 400px; }

Pada Bootstrap 4, dan jika Anda tidak ingin mengubah semua lebar tooltips, Anda dapat menggunakan templat khusus untuk tooltip yang Anda inginkan:

<a href="https://stackoverflow.com/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>

Coba kode ini,

.tooltip-inner {
     max-width:350px !important;
}

Saya memiliki masalah yang sama, namun semua jawaban populer - untuk mengubah .tooltip-inner{width}tugas saya gagal melakukan pekerjaan dengan benar. Adapun tooltips lainnya (yaitu lebih pendek) lebar tetap terlalu besar. Saya malas menulis templat / kelas html terpisah untuk zillions tooltips, jadi saya hanya mengganti semua spasi antar kata dengan  di setiap baris teks.

Saya perlu menyesuaikan lebar beberapa tooltips. Tapi bukan pengaturan keseluruhan. Jadi saya akhirnya melakukan ini:

CSS

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

Html

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

Mengatur max-lebar tooltip-inner kelas tidak bekerja untuk saya , saya menggunakan bootstrap 3.2

Beberapa cara mengatur max-width hanya berfungsi jika Anda mengatur lebar kelas induk (.tooltip).

Tapi kemudian semua tooltips menjadi ukuran yang Anda tentukan. Jadi, inilah solusi saya:

tambahkan Lebar ke kelas induk:

.tooltip {
  width:400px;
}

Kemudian Anda menambahkan lebar-max dan mengubah tampilan menjadi inline-block, sehingga tidak akan menempati seluruh ruang

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}

Milik saya di mana semua panjang variabel dan lebar max yang ditetapkan tidak akan bekerja untuk saya, jadi mengatur css saya hingga 100% berfungsi seperti mantra.

.tooltip-inner {
    max-width: 100%;
}

Dengan Bootstrap 4 saya gunakan

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

di bootstrap 3.0.3 Anda dapat melakukannya dengan memodifikasi kelas popover

.popover {
    min-width: 200px;
    max-width: 400px;
}