BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] bootstrap の "tooltip" と "popover" はテーブルに余分なサイズを追加する

2023-06-06 13:22:16

質問

注意

Bootstrapのバージョン（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>

アドバイスありがとうございました。

どのように解決するのですか？

<ブロッククオート

注意してください。 Bootstrap 3.0 ~ 3.2での解決法

の中に要素を作成する必要があります。 td の中に要素を作り、そこにツールチップを適用する必要があります。 この のように、ツールチップを適用することができます。 td 要素の後に置かれた場合、テーブルレイアウトにブレーキをかけます。

この問題は、Bootstrapの最新リリースで導入されました。の修正について議論が続いています。 GitHubはこちら . 次のバージョンでは、修正されたファイルが含まれていることを期待します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します