ブートストラップ「ツールチップ」と「ポップオーバー」により、テーブルにサイズが追加されます

Question 1

注：
ブートストラップのバージョン（3.3より前かどうか）によっては、異なる回答が必要になる場合があります。
注意事項に注意してください。

このコードでツールチップ（セルにカーソルを合わせる）またはポップオーバーをアクティブにすると、テーブルのサイズが大きくなります。どうすればこれを回避できますか？

ここでemptyRow-100でtrを生成する関数

<html>
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
    <style>    
    #matrix td {
        width: 10px;
        height: 10px;
        border: 1px solid gray; 
        padding: 0px; 
    }
    </style>
<script>
function emptyRow() {
        str = '<tr>'
        for (j = 0; j < 100; j++) {
            str += '<td rel="tooltip" data-original-title="text"></td>'
        }
        str += '</tr>'
        return str
    }
    $(document).ready(function () {
        $("#matrix tr:last").after(emptyRow())
        $("[rel=tooltip]").tooltip();
    });
    </script>
</head>
<body style="margin-top: 40px;">
<table id="matrix">
    <tr>
    </tr>
</table>
</body>
</html>

アドバイスに感謝します！

Question 2

注： Bootstrap 3.0〜3.2のソリューション

ツールチップ自体はdivであり、要素の後に配置するとテーブルレイアウトにブレーキがかかるため、a内に要素を作成し、このtdようにツールチップを適用する必要があります。td

この問題は、Bootstrapの最新リリースで発生しました。ここでGitHubの修正に関する継続的な議論があります。うまくいけば、次のバージョンには修正されたファイルが含まれています。

Question 3

注： Bootstrap3.3以降のソリューション

簡単な解決策

.tooltip()呼び出し、設定containerオプションをするにはbody：

$(function () {
  $('[data-toggle="tooltip"]').tooltip({
    container : 'body'
  });
});

または、data-container属性を使用して同じことを行うこともできます。

<p data-toggle="tooltip" data-placement="left" data-container="body" title="hi">some text</p>

なぜこれが機能するのですか？

これにより、デフォルトでツールチップにがdisplay: blockあり、要素が呼び出された場所に挿入されるため、問題が解決します。が原因で、display: block場合によってはページフローに影響します。つまり、他の要素を押し下げます。

コンテナをbody要素に設定すると、ツールチップが呼び出された場所ではなくbodyに追加されるため、「プッシュダウン」するものがないため、他の要素に影響を与えることはありません。

ブートストラップツールチップのドキュメント

Question 4

注： Bootstrap3.3以降のソリューション

<td>要素にツールチップを適用するときにテーブルを壊さないようにする場合は、次のコードを使用できます。

    $(function () {
        $("body").tooltip({
            selector: '[data-toggle="tooltip"]',
            container: 'body'
        });
    })

あなたのhtmlは次のようになります：

<td data-toggle="tooltip" title="Your tooltip data">
    Table Cell Content
</td>

これは、動的にロードされたコンテンツでも機能します。たとえば、datatablesで使用中

Question 5

受け入れられた回答にある程度の精度を追加したいので、読みやすくするために回答形式を使用することにしました。

注： Bootstrap 3.0〜3.2のソリューション

現時点では、ツールチップをdivでラップすることが解決策ですが、全体<td>にツールチップを表示する場合は、いくつかの変更が必要になります（Bootstrap CSSのため）。これを行う簡単な方法は、<td>tのパディングをラッパーに転送することです。

HTML

<table class="table table-hover table-bordered table-striped">
    <tr>
        <td>
            <div class="show-tooltip" title="Tooltip content">Cell content</div>
        </td>
    </tr>
</table>

JS（jQuery）

$('.show-tooltip').each(function(e) {
    var p = $(this).parent();
    if(p.is('td')) {
        /* if your tooltip is on a <td>, transfer <td>'s padding to wrapper */
        $(this).css('padding', p.css('padding'));
        p.css('padding', '0 0');
    }
    $(this).tooltip({
        toggle: 'toolip',
        placement: 'bottom'
    });
});

Question 6

データテーブル関数fnDrawCallback内でツールチップを初期化する必要があります

"fnDrawCallback": function (data, type, full, meta) { $('[data-toggle="tooltip"]').tooltip({ placement: 'right', title: 'heyo', container: 'body', html: true }); },

そして、以下のように列を定義します

 {
      targets: 2,
      'render': function (data, type, full, meta) {
       var htmlBuilder = "<b>" + data + "</b><hr/><p>Description: <br/>" + full["longDescrioption"] + "</p>";
      return "<a href='#' class='Name'>" + (data.length > 50 ? data.substr(0, 50) + '…' : data) + "</a>" +
      "<sup data-toggle='tooltip' data-original-title=" + htmlBuilder + ">"+
      "<i class='ic-open-in-new ic' style='font-size:12px;margintop:-3px;'></i></sup>";
    }
 },

Question 7

テーブルにdatatableを使用している場合は、完全に使用されます

$('#TableId').DataTable({
                "drawCallback": function (settings) {
                    debugger;
                    $('[data-toggle="tooltip"]').tooltip({
                        container: 'body'
                    });

                }
            });

Question 8

AngularJSにブートストラップディレクティブを使用している場合は、tooltip-append-to-body属性を使用します。

<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>