Clever Geek Handbook

At the top of the bootstrap popover is disabled inside a div

I have a table with buttons that generates popovers on the left, and the table is inside the accordion. The problem is, if the popover is generated from the top of the table, the popover is disabled. How would I manually place the popover on a pixel, still on the left, or just so that it appears on top (outside the div).

JSFiddle example

Here's my 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>

Here's my CSS:

.well {
    margin-top: 40px;
}

.testTable{
    height: 200px;
    overflow: auto;
}

table{
    height: 200px;
    text-align:center;
}

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


source to share


2 answers


Make the container like a body



$('#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."});
+3


source


You can specify the container using the data-container attribute, or you can do it in 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."});


Found at: fooobar.com/questions/57316 / ...

0


source






More articles:


All Articles