Javascript 引导弹出框顶部在div内被切断_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 引导弹出框顶部在div内被切断

javascript jquery html css twitter-bootstrap

Javascript 引导弹出框顶部在div内被切断,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我有一张满是按钮的桌子，可以在左边生成弹出框，桌子在手风琴内。问题是，如果popover是从表的顶部生成的，则popover会被切断。我如何手动将popover按像素定位在左侧，或仅使其显示在顶部（div外部）这是我的HTML： <body> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-

我有一张满是按钮的桌子，可以在左边生成弹出框，桌子在手风琴内。问题是，如果popover是从表的顶部生成的，则popover会被切断。我如何手动将popover按像素定位在左侧，或仅使其显示在顶部（div外部）

这是我的HTML：

<body>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
       <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class = "testTable">
            <table class = "table table-striped">
            <tr><td>Test1</td>
            <td>         
                <div class = "td-container">
                    <div class ="btn-group btn-broup-sm">
                        <button id="elem" class="btn btn-danger" data-trigger="click">
                            Click for popover</button>
                    </div></div></td></tr>
            <tr>
                <td>Test3</td>
                <td>Test3</td>
            </tr>
            <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
            <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
            <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
        </table>
        </div>
        </div>
        </div>

         <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Test text
      </div>
    </div>
  </div>
<body>

Javascript:

$('#elem').popover({placement:"left",
                    container:".td-container",
                    html: true,
                    title: "Test popover",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});

可以使用数据容器属性指定容器，也可以在JavaScript中指定

$('#elem').popover({placement:"left",
                    container:".td-container",
                    html: true,
                    title: "Test popover",
                    container: "body",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});

发现于：

将容器作为主体

$('#elem').popover({placement:"left",
                    container:"body",
                    html: true,
                        title: "Test popover",
                        content:"Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});

如果我将其添加到主体中，popover将不会随表格滚动。它固定在主体上。如果我将其添加到主体上，popover将不会随表格滚动。它固定在身体上

$('#elem').popover({placement:"left",
                    container:"body",
                    html: true,
                        title: "Test popover",
                        content:"Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});