부트 스트랩 팝 오버 너비 변경

부트 스트랩 팝 오버 너비 변경

---

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

---

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

---

여기에 최종 해결책이 없습니다.

Updated version (jQuery 1.11 + Bootstrap 3.1.1 + class="col-xs-" instead of class="col-md-") of your original JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Now the same JSFiddle with your proposed solution: http://jsfiddle.net/tkrotoff/N99h7/8/
It does not work: the popover is positioned relative to the <div class="col-*"> + imagine you have multiple inputs for the same <div class="col-*">...

So if we want to keep the popover on the inputs (semantically better):

• .popover { position: fixed; }: but then each time you scroll the page, the popover will not follow the scroll
• .popover { width: 100%; }: not that good since you still depend on the parent width (i.e <div class="col-*">
• .popover-content { white-space: nowrap; }: good only if the text inside the popover is shorter than max-width

See http://jsfiddle.net/tkrotoff/N99h7/11/

Maybe, using very recent browsers, the new CSS width values can solve the problem, I didn't try.

---

container: 'body' normally does the trick (see JustAnil's answer above), but there's a problem if your popover is in a modal. The z-index places it behind the modal when the popover's attached to body. This seems to be related to BS2 issue 5014, but I'm getting it on 3.1.1. You're not meant to use a container of body, but if you fix the code to

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

then you fix the z-index problem, but the popover width is still wrong.

The only fix I can find is to use container: 'body' and to add some extra css:

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

Note that css solutions by themselves won't work.

---

You can use attribute data-container="body" within 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>

---

Here's the non-coffeescript way of doing it with hover:

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

---

For people who prefer the JavaScript solution. In Bootstrap 4 tip() became getTipElement() and it returns a no jQuery object. So in order to change the width of the popover in Bootstrap 4 you can use:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

---

You can adjust the width of the popover with methods indicated above, but the best thing to do is to define the width of the content before Bootstrap sees is and does its math. For instance, I had a table, I defined it's width, then bootstrap built a popover to suit it. (Sometimes Bootstrap has trouble determining the width, and you need to step in and hold its hand)

---

I used this(working fine) :

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

---

One tested solution for Bootstrap 4 beta:

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

Together with the jQuery statement:

$('[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 이전).

---

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

---

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

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

---

이 시도:

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

참고 URL : https://stackoverflow.com/questions/19448902/changing-the-width-of-bootstrap-popover