bootstrap “tooltip” và “popover” thêm kích thước vào bảng

Question 1

Lưu ý:
Tùy thuộc vào phiên bản Bootstrap của bạn (trước 3.3 hay không), bạn có thể cần một câu trả lời khác nhau.
Hãy chú ý đến các ghi chú.

Khi tôi kích hoạt chú giải công cụ (di chuột qua ô) hoặc cửa sổ bật lên trong mã này, kích thước của bảng sẽ tăng lên. Làm thế nào tôi có thể tránh điều này?

Ở đây voidRow - hàm tạo tr với 100

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

cảm ơn trong lời khuyên!

Question 2

Lưu ý: Giải pháp cho Bootstrap 3.0 ~ 3.2

Bạn cần tạo một phần tử bên trong a tdvà áp dụng chú giải công cụ cho nó, như thế này , vì bản thân chú giải công cụ là một div và khi nó được đặt sautd phần tử, nó sẽ hãm bố cục bảng.

Sự cố này đã được đưa ra với bản phát hành mới nhất của Bootstrap. Có các cuộc thảo luận đang diễn ra về các bản sửa lỗi trên GitHub tại đây . Hy vọng rằng phiên bản tiếp theo bao gồm các tệp cố định.

Question 3

Lưu ý: Giải pháp cho Bootstrap 3.3+

Giải pháp đơn giản

Trong .tooltip()cuộc gọi, hãy đặt containertùy chọn thành body:

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

Ngoài ra, bạn có thể làm điều tương tự bằng cách sử dụng data-containerthuộc tính:

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

Tại sao điều này hoạt động?

Điều này giải quyết được vấn đề vì theo mặc định, chú giải công cụ có display: blockvà phần tử được chèn vào nơi nó được gọi từ đó. Do display: blockđó, nó ảnh hưởng đến luồng trang trong một số trường hợp, tức là đẩy các phần tử khác xuống.

Bằng cách đặt vùng chứa thành phần tử body, chú giải công cụ sẽ được thêm vào phần thân thay vì nơi nó được gọi từ đó, vì vậy nó không ảnh hưởng đến các phần tử khác vì không có gì để "đẩy xuống".

Tài liệu về Chú giải công cụ Bootstrap

Question 4

Lưu ý: Giải pháp cho Bootstrap 3.3+

Nếu bạn muốn tránh làm vỡ bảng khi áp dụng chú giải công cụ cho một <td>phần tử, bạn có thể sử dụng mã sau:

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

Html của bạn có thể trông như thế này:

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

Điều này thậm chí hoạt động với nội dung được tải động. Ví dụ trong sử dụng với datatables

Question 5

Tôi muốn thêm một số độ chính xác vào câu trả lời được chấp nhận, tôi quyết định sử dụng định dạng câu trả lời để dễ đọc.

Lưu ý: Giải pháp cho Bootstrap 3.0 ~ 3.2

Ngay bây giờ, gói chú giải công cụ của bạn trong một div là giải pháp , nhưng nó sẽ cần một số sửa đổi nếu bạn muốn toàn bộ <td>chú giải công cụ của mình hiển thị chú giải công cụ (vì Bootstrap CSS). Một cách đơn giản để làm điều đó là chuyển <td>padding của nó sang wrapper:

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

Bạn nên khởi tạo Chú giải công cụ bên trong hàm dữ liệu fnDrawCallback

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

Và xác định cột của bạn như bên dưới

 {
      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

Nếu bạn đang sử dụng dữ liệu cho bảng thì nó sẽ được sử dụng đầy đủ

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

                }
            });

Question 8

Nếu bạn đang sử dụng chỉ thị bootstrap cho AngularJS, hãy sử dụng thuộc tính tooltip-append-to-body.

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