Bootstrap 3을 사용하여 페이지를 디자인하고 placement: right있습니다. 입력 요소에 팝 오버를 사용하려고합니다 . 새로운 부트 스트랩은 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>

내 의견으로는 popovers 너비가 너무 낮아서 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보기 )

트위터 부트 스트랩 컨테이너

그래도 작동하지 않으면 컨테이너를 지정해야합니다.

// 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 솔루션 (여기 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"))

해결 방법은 마지막 줄에 있습니다. 팝 오버가 표시되기 전에 최대 너비 옵션이 사용자 정의 값으로 설정됩니다. tip 요소에 사용자 정의 클래스를 추가 할 수도 있습니다.

나는 같은 문제가 있었다. 답을 찾고 꽤 시간을 보냈고 내 자신의 해결책을 찾았습니다. 머리에 다음 텍스트를 추가하십시오.

<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 솔루션을 선호하는 사람들을 위해. 에서 부트 스트랩 4 팁 ()이되었다 getTipElement () 그리고 노의 jQuery 객체를 반환합니다. 따라서 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>

기본적으로 팝업 div를 입력 div 대신 행 div에 넣습니다. 문제를 해결했습니다.

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

여기에 마지막 해결책은 없습니다.

원래 JSFiddle의 업데이트 된 버전 (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-md-"대신 class = "col-xs-") : http://jsfiddle.net/tkrotoff/N99h7/

이제 제안 된 솔루션 과 동일한 JSFiddle : http://jsfiddle.net/tkrotoff/N99h7/8/
작동하지 않습니다. 팝 오버는 <div class="col-*">+에 상대적으로 배치되어 있습니다 <div class="col-*">.

따라서 입력에서 팝 오버를 유지하려면 (의미 적으로 더 나은) :

• .popover { position: fixed; }: 그러나 페이지를 스크롤 할 때마다 팝 오버가 스크롤을 따르지 않습니다.
• .popover { width: 100%; }: 여전히 부모 너비에 의존하기 때문에 좋지 않습니다 (즉 <div class="col-*">
• .popover-content { white-space: nowrap; }: 팝 오버 내부의 텍스트가 다음보다 짧은 경우에만 적합 max-width

http://jsfiddle.net/tkrotoff/N99h7/11/ 참조

아마도 최신 브라우저를 사용하면 새로운 CSS 너비 값으로 문제를 해결할 수 있습니다.

container: 'body'일반적으로 트릭을 수행하지만 (위의 JustAnil의 답변 참조) 팝 오버가 모달 인 경우 문제가 있습니다. z-index장소를 뒤에 모달 팝 오버가에 붙어 때 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 솔루션 자체는 작동하지 않습니다.

팝 오버 내에서 data-container = "body"속성을 사용할 수 있습니다

<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 를 사용하여 popover 및 툴팁 위치를 결정합니다 (tether.js 이전).

위에 표시된 방법으로 팝 오버의 너비를 조정할 수 있지만 가장 좋은 방법은 부트 스트랩이보고 계산하기 전에 컨텐츠의 너비를 정의하는 것입니다. 예를 들어, 나는 테이블을 가지고 너비를 정의한 다음 부트 스트랩은 그에 맞게 팝 오버를 만들었습니다. (때때로 부트 스트랩은 너비를 결정하는 데 문제가 있으므로 들어서 손을 잡아야합니다)

나는 이것을 사용했다.

.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-content"너비를 원하는 숫자로 설정하여 끝납니다. (다른 아이디 나 클래스는 작동하지 않습니다 .....) 행운을 빈다!

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

타이프 스크립트 컴포넌트의 경우 :

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

Angular에서는 팝 오버를 트리거하는 컨트롤 (예 : 버튼 또는 텍스트 상자)에 ng-bootstrap간단하게 container="body"연결할 수 있습니다 . 그런 다음 전역 스타일 파일 ( style.css또는 style.scss) 파일에 추가해야합니다 .popover { max-width: 100% !important; }. 그 후, 팝 오버의 내용은 내용 폭으로 자동 설정됩니다.

부트 스트랩 4에서는 다음 $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";

부트 스트랩 4 기본값 재정의에 대한 자세한 내용 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Bootstrap 4에서 max-width를 재정 의하여 템플릿 옵션을 쉽게 검토 할 수 있습니다.

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