ฉันกำลังออกแบบหน้าโดยใช้ Bootstrap 3 ฉันพยายามใช้ popover กับplacement: rightองค์ประกอบการป้อนข้อมูล Bootstrap ใหม่ช่วยให้มั่นใจได้ว่าถ้าคุณใช้form-controlคุณจะมีองค์ประกอบอินพุตแบบเต็มความกว้าง

รหัส HTML มีลักษณะดังนี้:

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

ในความคิดของฉันความกว้างของป๊อปอัปต่ำเกินไปเพราะความกว้างของมันไม่ได้อยู่ใน div ฉันต้องการรูปแบบการป้อนข้อมูลทางด้านซ้ายและป๊อปอัพที่กว้างทางด้านขวา

ส่วนใหญ่ฉันกำลังมองหาทางออกที่ฉันไม่ต้องแทนที่ Bootstrap

JsFiddle ที่แนบมา ตัวเลือกอินพุตที่สอง ยังไม่ได้ใช้ jsfiddle บ่อยนักดังนั้นไม่รู้ แต่ลองเพิ่มขนาดของกล่องผลลัพธ์เพื่อดูผลลัพธ์บนหน้าจอขนาดเล็กจะไม่เห็นเลย http://jsfiddle.net/Rqx8T/

เพิ่มความกว้างด้วย CSS

คุณสามารถใช้ CSS เพื่อเพิ่มความกว้างของป๊อปโอเวอร์ของคุณเช่น:

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

หากวิธีนี้ใช้ไม่ได้ผลคุณอาจต้องการโซลูชันด้านล่างและแก้ไขcontainerองค์ประกอบของคุณ ( ดู JSFiddle )

Twitter bootstrap คอนเทนเนอร์

หากวิธีนี้ใช้ไม่ได้ผลคุณอาจต้องระบุคอนเทนเนอร์:

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

ข้อมูลเพิ่มเติม

ป๊อปโอเวอร์มีอยู่ในองค์ประกอบที่ถูกเรียกใช้เพื่อขยาย "เต็มความกว้าง" - ระบุคอนเทนเนอร์:

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

JSFiddle

ดู JSFiddle เพื่อทดลองใช้

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

ฉันต้องการป๊อปโอเวอร์ที่กว้างขึ้นสำหรับฟิลด์ข้อความค้นหา ฉันมากับโซลูชัน Javascript นี้ (ที่นี่ในกาแฟ ):

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

วิธีแก้ปัญหาอยู่ในบรรทัดสุดท้าย ก่อนที่จะแสดง popover ตัวเลือกความกว้างสูงสุดจะถูกตั้งค่าเป็นค่าที่กำหนดเอง คุณสามารถเพิ่มคลาสที่กำหนดเองให้กับองค์ประกอบเคล็ดลับ

ผมมีปัญหาเหมือนกัน. ใช้เวลาค้นหาคำตอบและหาคำตอบของฉันเอง: เพิ่มข้อความต่อไปนี้ในหัว

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

หากต้องการเปลี่ยนความกว้างคุณสามารถใช้ CSS

สำหรับขนาดที่ต้องการคงที่

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

สำหรับความกว้างสูงสุดที่ต้องการ:

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

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

ในการเปลี่ยนความกว้างของป๊อปโอเวอร์คุณสามารถแทนที่เทมเพลต:

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

สำหรับคนที่ชอบโซลูชัน JavaScript ในBootstrap 4เคล็ดลับ () กลายเป็น getTipElement () และส่งคืนวัตถุที่ไม่มี jQuery ดังนั้นเพื่อเปลี่ยนความกว้างของ popover ใน Bootstrap 4 คุณสามารถใช้:

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

โดยทั่วไปฉันใส่รหัส popover ใน div แถวแทน div input แก้ไขปัญหา

ด้วยความช่วยเหลือของสิ่งที่ @EML ได้อธิบายไว้ข้างต้นเกี่ยวกับป๊อปโอเวอร์บนหน้าต่างโมดอลและรหัสที่แสดงโดย @ 2called-chaos นี่คือวิธีที่ฉันแก้ไขปัญหา

ฉันมีไอคอนในคำกริยาซึ่งเมื่อคลิกควรป๊อปอัพ

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>

สคริปต์ของฉัน

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

ไม่มีวิธีแก้ปัญหาขั้นสุดท้ายที่นี่: / เพียงแค่คิดวิธีการ "หมดจด" แก้ปัญหานี้ ...

อัปเดตเวอร์ชัน (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" แทน class = "col-md-") ของ JSFiddle ต้นฉบับของคุณ: http://jsfiddle.net/tkrotoff/N99h7/

ตอนนี้ JSFiddle เดียวกันกับโซลูชันที่คุณเสนอ : http://jsfiddle.net/tkrotoff/N99h7/8/
มันไม่ทำงาน: ตัว popover นั้นอยู่ในตำแหน่งที่สัมพันธ์กับ<div class="col-*">+ ลองนึกภาพว่าคุณมีอินพุตหลายตัวพร้อมกัน<div class="col-*">...

ดังนั้นถ้าเราต้องการเก็บ popover บนอินพุท (semantically better):

• .popover { position: fixed; }: แต่จากนั้นทุกครั้งที่คุณเลื่อนหน้าป๊อปโอเวอร์จะไม่ติดตาม
• .popover { width: 100%; }: ไม่ค่อยดีนักเพราะคุณยังต้องพึ่งพาความกว้างของพาเรนต์ (เช่น <div class="col-*">
• .popover-content { white-space: nowrap; }: ดีต่อเมื่อข้อความใน popover สั้นกว่า max-width

ดูhttp://jsfiddle.net/tkrotoff/N99h7/11/

อาจใช้เบราว์เซอร์รุ่นล่าสุดค่าความกว้าง CSS ใหม่สามารถแก้ปัญหาได้ฉันไม่ได้ลอง

container: 'body'ตามปกติแล้วเคล็ดลับ (ดูคำตอบของ JustAnil ด้านบน) แต่มีปัญหาหากป๊อปโอเวอร์ของคุณอยู่ในกิริยา z-indexตำแหน่งมันอยู่เบื้องหลังกิริยาเมื่อ popover bodyของที่แนบมากับ ดูเหมือนว่าจะเกี่ยวข้องกับปัญหา BS2 5014แต่ฉันได้รับใน 3.1.1 คุณไม่ได้ตั้งใจจะใช้containerของbodyแต่ถ้าคุณแก้ไขรหัสไป

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

คุณต้องแก้ไขz-indexปัญหา แต่ความกว้างของป๊อปอัปยังคงไม่ถูกต้อง

แก้ไขเดียวที่ฉันสามารถหาได้คือการใช้container: 'body'และเพิ่ม CSS พิเศษบางอย่าง:

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

โปรดทราบว่าโซลูชัน css ด้วยตนเองจะไม่ทำงาน

คุณสามารถใช้ attribute data-container = "body" ภายใน 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>

นี่คือวิธีที่ไม่ใช้วิธีทำด้วยโฮเวอร์:

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

ทางออกทดสอบหนึ่งสำหรับ Bootstrap 4 เบต้า:

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

ร่วมกับคำสั่ง jQuery:

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

ด้านโน้ตdata-container="body"หรือcontainer: "body"ทั้ง HTML หรือเป็นoptionไปpopover({})วัตถุไม่ได้จริงๆทำเคล็ดลับ [อาจจะทำผลงาน แต่เพียงร่วมกับคำสั่งแบบ CSS];

นอกจากนี้โปรดจำไว้ว่า Bootstrap 4 เบต้าอาศัยpopper.jsสำหรับป๊อปโอเวอร์และการวางตำแหน่งเคล็ดลับเครื่องมือ (ก่อนหน้านั้นคือ tether.js)

คุณสามารถปรับความกว้างของป๊อปโอเวอร์ด้วยวิธีการที่ระบุข้างต้น แต่สิ่งที่ดีที่สุดที่ต้องทำคือการกำหนดความกว้างของเนื้อหาก่อนที่ Bootstrap จะเห็นและทำคณิตศาสตร์ ตัวอย่างเช่นฉันมีตารางฉันกำหนดความกว้างแล้ว bootstrap สร้าง popover เพื่อให้เหมาะกับมัน (บางครั้ง Bootstrap มีปัญหาในการกำหนดความกว้างและคุณจำเป็นต้องก้าวเข้ามาและจับมือกัน)

ฉันใช้สิ่งนี้ (ใช้งานได้ดี):

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

ฉันท้ายด้วยการตั้งค่า div "เนื้อหา popover" ให้เป็นตัวเลขที่ฉันต้องการ (รหัสหรือชั้นเรียนอื่นจะไม่ทำงาน ..... ) โชคดี!

  #popover-content{
      width: 600px;

  }

คุณยังสามารถเพิ่ม data-container = "body" ซึ่งควรทำงาน:

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

คุณสามารถเปลี่ยนเทมเพลตของป๊อปโอเวอร์ของคุณ ไม่ว่าจะเป็นdata-template-attribute หรือส่วนที่เกี่ยวข้องในฟังก์ชั่นที่ตั้งค่าไว้:

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

สำหรับองค์ประกอบ typescript:

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

ในแองกูลาร์ng-bootstrapคุณสามารถcontainer="body"ไปยังตัวควบคุมที่ทริกเกอร์ป๊อปโอเวอร์ (เช่นปุ่มหรือกล่องข้อความ) จากนั้นในแฟ้ม styleing ทั่วโลก ( style.cssหรือstyle.scssไฟล์) .popover { max-width: 100% !important; }คุณต้องเพิ่ม หลังจากนั้นเนื้อหาของ popover จะถูกตั้งค่าเป็นความกว้างเนื้อหาโดยอัตโนมัติ

ใน bootstrap 4 คุณสามารถแทนที่ค่าเริ่มต้นของตัวแปร bootstrap $popover-max-widthในไฟล์ styles.scss ของคุณดังนี้:

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

เพิ่มเติมเกี่ยวกับการเอาชนะ bootstrap 4 ค่าเริ่มต้นhttps://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

บน Bootstrap 4 คุณสามารถตรวจสอบตัวเลือกเทมเพลตได้อย่างง่ายดายโดยแทนที่ความกว้างสูงสุด:

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

นี่เป็นทางออกที่ดีหากคุณมีป๊อปอัปหลายแห่งในหน้า

ลองสิ่งนี้:

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