คุณจะเปลี่ยนความกว้างและความสูงของคำแนะนำเครื่องมือของ Twitter Bootstrap ได้อย่างไร

ฉันสร้างคำแนะนำเครื่องมือโดยใช้ Twitter Bootstrap

เคล็ดลับเครื่องมือแสดงด้วยสามบรรทัด อย่างไรก็ตามฉันต้องการแสดงคำแนะนำเครื่องมือโดยมีเพียงหนึ่งบรรทัด

ฉันจะเปลี่ยนความกว้างของคำแนะนำเครื่องมือได้อย่างไร สิ่งนี้เฉพาะกับ Twitter Bootstrap หรือเพื่อแนะนำเครื่องมือตัวเองหรือไม่?

เพียงแทนที่ bootstrap.css

ค่าเริ่มต้นใน BS2 คือความกว้างสูงสุด: 200px; ดังนั้นคุณสามารถเพิ่มได้ด้วยสิ่งที่เหมาะกับความต้องการของคุณ

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

ใน BS3

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

ฉันรู้ว่านี่เป็นคำถามที่เก่ามาก แต่ถ้าฉันมาถึงที่นี่ ดังนั้นฉันคิดว่าฉันชั่งน้ำหนัก

หากคุณต้องการให้คำแนะนำเครื่องมือตอบสนองต่อหนึ่งบรรทัดเท่านั้นโดยไม่คำนึงถึงเนื้อหาที่คุณเพิ่มเข้าไปความกว้างนั้นจะต้องยืดหยุ่น อย่างไรก็ตาม Bootstrap เริ่มต้นเคล็ดลับเครื่องมือให้มีความกว้างดังนั้นอย่างน้อยคุณต้องประกาศว่าความกว้างนั้นจะเป็นอย่างไรและทำให้มันยืดหยุ่นจากขนาดนั้นขึ้นไป นี่คือสิ่งที่ฉันแนะนำ:

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

min-widthประกาศขนาดเริ่มต้น ซึ่งตรงกันข้ามกับความกว้างสูงสุดที่บางคนแนะนำซึ่งจะประกาศความกว้างหยุด ตามคำถามของคุณคุณไม่ควรประกาศความกว้างสุดท้ายมิฉะนั้นเนื้อหาคำแนะนำเครื่องมือของคุณจะถูกรวมเข้าด้วยกันในที่สุด คุณใช้ความกว้างไม่ จำกัด หรือความกว้างแบบยืดหยุ่นแทนmax-width: 100%;จะให้แน่ใจว่าเมื่อคำแนะนำเครื่องมือเริ่มต้นที่ 100px มันจะขยายและปรับให้เข้ากับเนื้อหาของคุณโดยไม่คำนึงถึงปริมาณเนื้อหาที่คุณมี

เก็บในใจ เคล็ดลับเครื่องมือไม่ได้มีวัตถุประสงค์เพื่อดำเนินการเนื้อหาจำนวนมาก มันอาจดูขี้ขลาดถ้าคุณมีสายยาวทั่วทั้งหน้าจอ และมันจะส่งผลกระทบต่อมุมมองที่ตอบสนองของคุณสมาร์ทโฟนเป็นพิเศษ (ความกว้าง 320px)

ฉันอยากจะแนะนำวิธีแก้ไขปัญหาสองข้อเพื่อทำให้สมบูรณ์

1. รักษาเนื้อหาคำแนะนำเครื่องมือของคุณให้น้อยที่สุดเพื่อไม่ให้เกินความกว้าง 320px และแม้ว่าคุณจะทำสิ่งนี้คุณต้องจำไว้ว่าคุณมีคำแนะนำเครื่องมือวางไว้ที่ด้านขวาของหน้าจอและด้วยdata-placement:rightเนื้อหาคำแนะนำเครื่องมือของคุณจะไม่ปรากฏในสมาร์ทโฟน (ด้วยเหตุนี้ทำไม bootstrap ห่อ)
2. หากคุณมีแนวคิดที่จะใช้คำแนะนำเครื่องมือบรรทัดเดียวนี้ให้ครอบคลุมทั้งหกข้อด้วยการใช้ a @mediaแบบสอบถามเพื่อรีเซ็ตคำแนะนำเครื่องมือของคุณเพื่อให้พอดีกับมุมมองสมาร์ทโฟน แบบนี้:

การสาธิตของฉันที่นี่แสดงให้เห็นถึงความยืดหยุ่นและการตอบสนองต่อคำแนะนำเครื่องมือตามขนาดเนื้อหาและขนาดการแสดงผลของอุปกรณ์เช่นกัน

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

คุณควรเขียนทับคุณสมบัติโดยใช้ CSS ของคุณเอง ชอบมาก:

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

ตัวเลือกเลือก div ที่คำแนะนำเครื่องมือถูกเก็บไว้ (คำแนะนำเครื่องมือถูกเพิ่มโดย javascript และมักจะไม่ได้อยู่ในคอนเทนเนอร์ใด ๆ

กำหนดความกว้างสูงสุดด้วย "สำคัญ!" และใช้ data-container = "body"

ไฟล์ CSS

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

แท็ก 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>

สคริปต์ JS

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

หากต้องการแก้ไขปัญหาความกว้างให้ใช้รหัสต่อไปนี้แทน

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

ตัวอย่าง: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

ทางออกอื่น สร้างคลาสใหม่ (เช่นคำแนะนำเครื่องมือกว้าง) ใน CSS:

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

ใช้คลาสนี้กับองค์ประกอบที่คุณต้องการคำแนะนำแบบกว้าง:

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

คำแนะนำเครื่องมือ Bootstrap สร้างมาร์กอัปด้านล่างองค์ประกอบที่มีคำแนะนำเครื่องมือดังนั้น HTML จะมีลักษณะเช่นนี้หลังจากสร้างมาร์กอัปแล้ว:

<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 ใช้สิ่งนี้เพื่อเข้าถึงองค์ประกอบที่อยู่ติดกัน (+) ไปยัง. totip-wide และจากนั้นนำทางไปยัง. totip-inner ก่อนที่จะใช้แอ็ตทริบิวต์ max-width สิ่งนี้จะส่งผลกระทบต่อองค์ประกอบที่ใช้คลาส. เครื่องมือขนาดกว้างเท่านั้นคำแนะนำเครื่องมืออื่น ๆ ทั้งหมดจะไม่เปลี่ยนแปลง

คุณสามารถแก้ไขคลาส ctooltip-inner ใน bootstrap.css ความกว้างสูงสุดเริ่มต้นคือ 200px คุณสามารถเปลี่ยนความกว้างสูงสุดเป็นขนาดที่คุณต้องการ

หลังจากทดลองใช้งานได้ดีที่สุดสำหรับฉัน:

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

เพียงแทนที่ค่าเริ่มต้นmax-widthเป็นสิ่งที่เหมาะกับความต้องการของคุณ

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

เมื่อความกว้างสูงสุดไม่ทำงาน (ตัวเลือก 1)

หากความกว้างสูงสุดไม่ทำงานคุณสามารถใช้ความกว้างที่กำหนดไว้แทน นี่เป็นเรื่องปกติ แต่เคล็ดลับเครื่องมือของคุณจะไม่ปรับขนาดให้พอดีกับข้อความอีกต่อไป หากคุณไม่ชอบให้ข้ามไปที่ตัวเลือก 2

.tooltip-inner {
  width: 350px;
}

จัดการกับภาชนะบรรจุขนาดเล็กได้อย่างถูกต้อง (ตัวเลือก 2)

เนื่องจาก Bootstrap ผนวกคำแนะนำเครื่องมือเป็นพี่น้องของเป้าหมายจึงถูก จำกัด โดยองค์ประกอบที่มี หากองค์ประกอบที่มีขนาดเล็กกว่าของคุณmax-widthแล้วmax-widthจะไม่ทำงาน

ดังนั้นเมื่อmax-widthไม่ได้ผลคุณต้องเปลี่ยนcontainer:

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

เคล็ดลับสำหรับมืออาชีพ: คอนเทนเนอร์สามารถเป็นตัวเลือกใดก็ได้ซึ่งดีเมื่อคุณต้องการแทนที่สไตล์ในเคล็ดลับเครื่องมือไม่กี่

ตั้งค่าคลาสให้กับคำแนะนำเครื่องมือหลักและสำหรับคำแนะนำเครื่องมือด้านใน

div.tooltip {
    width: 270px;
}

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

โปรดดูโพสต์ด้านล่าง คำตอบของ cmcculloh ทำงานสำหรับฉัน https://stackoverflow.com/posts/31683500/edit

ดังที่ได้กล่าวไว้ในเอกสารวิธีที่ง่ายที่สุดในการตรวจสอบให้แน่ใจว่าคำแนะนำเครื่องมือของคุณไม่ได้ใช้งาน

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

ด้วยสิ่งนี้คุณไม่ต้องกังวลกับค่ามิติหรืออะไรทำนองนั้น ปัญหาหลักคือถ้าคุณมีข้อความยาวเป็นพิเศษมันจะหายไปจากหน้าจอ (ดังที่คุณเห็นในตัวอย่าง JSBin )

BS3:

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

บน Bootstrap 4 และหากคุณไม่ต้องการเปลี่ยนความกว้างของคำแนะนำเครื่องมือทั้งหมดคุณสามารถใช้เทมเพลตเฉพาะสำหรับคำแนะนำเครื่องมือที่คุณต้องการ:

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

ลองรหัสนี้

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

ฉันมีปัญหาเดียวกัน แต่คำตอบยอดนิยมทั้งหมด - การเปลี่ยนแปลง.tooltip-inner{width}สำหรับงานของฉันล้มเหลวในการทำงานที่ถูกต้อง สำหรับคำแนะนำเครื่องมืออื่น ๆ (เช่นสั้นกว่า) ความกว้างคงที่นั้นใหญ่เกินไป ฉันขี้เกียจที่จะเขียนเทมเพลต / คลาส html แยกต่างหากสำหรับ zilions ของคำแนะนำเครื่องมือดังนั้นฉันจึงแทนที่ช่องว่างทั้งหมดระหว่างคำด้วย ในแต่ละบรรทัดข้อความ

ฉันต้องการปรับความกว้างของคำแนะนำเครื่องมือ แต่ไม่ใช่การตั้งค่าโดยรวม ดังนั้นฉันจึงลงมือทำสิ่งนี้:

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

การตั้งค่าความกว้างสูงสุดของคำแนะนำเครื่องมือชั้นในไม่ทำงานสำหรับฉันฉันใช้ bootstrap 3.2

วิธีการตั้งค่าความกว้างสูงสุดใช้ได้เฉพาะเมื่อคุณตั้งค่าความกว้างของคลาสหลักพาเรนต์ (.tooltip)

แต่คำแนะนำเครื่องมือทั้งหมดจะกลายเป็นขนาดที่คุณระบุ ดังนั้นนี่คือทางออกของฉัน:

เพิ่มความกว้างให้กับชั้นผู้ปกครอง:

.tooltip {
  width:400px;
}

จากนั้นคุณเพิ่มความกว้างสูงสุดและเปลี่ยนการแสดงผลเป็นแบบอินไลน์บล็อกดังนั้นมันจะไม่ใช้พื้นที่ทั้งหมด

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

เหมืองที่ความยาวแปรผันและความกว้างสูงสุดที่ตั้งไว้จะไม่ทำงานสำหรับฉันดังนั้นการตั้งค่า css ของฉันเป็น 100% ใช้งานได้อย่างมีเสน่ห์

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

ด้วย Bootstrap 4 ฉันใช้

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

ใน bootstrap 3.0.3 คุณสามารถทำได้โดยการแก้ไขคลาส popover

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