[javascript] 부트 스트랩 “툴팁”및 “팝 오버”는 테이블에 추가 크기를 추가합니다.

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 솔루션

당신은 내부의 요소를 작성해야 td하고처럼, 그것에 툴팁 적용 이 그것이 다음에 위치하면 툴팁 자체 사업부이기 때문에, 그리고 td요소 그것은 브레이크 테이블 레이아웃.

이 문제는 최신 Bootstrap 릴리스에서 발생했습니다. 여기 에서 GitHub의 수정 사항에 대한 지속적인 토론이 있습니다 . 다음 버전에는 수정 된 파일이 포함되기를 바랍니다.

Question 3

참고 : 부트 스트랩 3.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 요소로 설정하면 도구 설명이 호출 된 위치 대신 본문에 추가되므로 “푸시 다운”할 항목이 없기 때문에 다른 요소에 영향을주지 않습니다.

부트 스트랩 툴팁 문서

Question 4

참고 : 부트 스트랩 3.3 이상을위한 솔루션

<td>요소에 도구 설명을 적용 할 때 테이블이 깨지는 것을 방지 하려면 다음 코드를 사용할 수 있습니다.

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

html은 다음과 같이 보일 수 있습니다.

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

이는 동적으로로드 된 콘텐츠에서도 작동합니다. 예를 들어 데이터 테이블 과 함께 사용

Question 5

허용되는 답변에 정밀도를 추가하고 싶습니다. 가독성을 위해 답변 형식을 사용하기로 결정했습니다.

참고 : Bootstrap 3.0 ~ 3.2 솔루션

지금 은 툴팁을 div로 래핑하는 것이 해결책 이지만 전체 <td>에 툴팁을 표시하려면 (Bootstrap CSS로 인해) 약간의 수정이 필요합니다 . 이를 수행하는 간단한 방법은 <td>패딩을 래퍼 로 전송하는 것입니다 .

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 내에서 Tooltip 을 초기화해야합니다.

"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

테이블에 데이터 테이블을 사용하는 경우 전체를 사용합니다.

$('#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>