Bootstrap의 툴팁은 마우스를 올리면 표 셀을 오른쪽으로 약간 이동합니다.

Bootstrap의 툴팁은 마우스를 올리면 표 셀을 오른쪽으로 약간 이동합니다.

---

내 프로젝트에 Bootstrap 3.1.1을 사용하고 있습니다. 내 테이블의 각 셀은 같은 데이터가 포함 000또는 111. 마우스 오버시이 데이터를 툴팁으로 표시하고 싶습니다. 지금까지는 작동합니다. 그러나에 마우스를 가져 가면 <td>인접한 모든 셀이 오른쪽으로 이동합니다.

여기 내 JSFiddle입니다.

<table class="table">
    <thead>
        <tr>
            <th class="matrisHeader">
                &nbsp;
            </th>
            <th data-original-title="111"
                data-toggle="tooltip" data-placement="bottom" title="">
                PÇ1
            </th>
            <th data-original-title="222"
                data-toggle="tooltip" data-placement="bottom" title="">
                PÇ2
            </th>
            <th data-original-title="333" data-toggle="tooltip"
                data-placement="bottom" title="">
                PÇ3
            </th>
            <th data-original-title="444"
                data-toggle="tooltip" data-placement="bottom"title="">
                PÇ4
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th data-original-title="555" data-toggle="tooltip" data-placement="bottom"
                 title="">
                ÖÇ1
            </th>
            <td data-original-title="666"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="777"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="888"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="999"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
        </tr>
        <tr>
            <th data-original-title="000" data-toggle="tooltip"
                data-placement="bottom" title="">
                ÖÇ2
            </th>
            <td data-original-title="aaa"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="bbb"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="ccc"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="ddd"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
        </tr>
        <tr>
            <th data-original-title="eee" data-toggle="tooltip" data-placement="bottom"
                title="">
                ÖÇ3
            </th>
            <td data-original-title="fff"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="ggg"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="hhh"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="iii"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
        </tr>
    </tbody>
</table>

---

data-container="body"문서 에 따라를 추가해야합니다 .

<td data-original-title="999" data-container="body"
 data-toggle="tooltip" data-placement="bottom" title="">
 &nbsp;
</td>

http://jsfiddle.net/uEqF2/2/

---

다음과 같은 방법으로 "데이터 컨테이너"를 설정할 수 있습니다.

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

참고 URL : https://stackoverflow.com/questions/21938008/bootstraps-tooltip-moves-table-cells-to-right-a-bit-on-hover