부트 스트랩 "툴팁"및 "팝 오버"는 테이블에 추가 크기를 추가합니다.
참고 :
부트 스트랩 버전 (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의 수정 사항에 대한 지속적인 토론이 있습니다 . 다음 버전에는 수정 된 파일이 포함되기를 바랍니다.
참고 : 부트 스트랩 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 요소로 설정하면 도구 설명이 호출 된 위치 대신 본문에 추가되므로 "푸시 다운"할 항목이 없기 때문에 다른 요소에 영향을주지 않습니다.
참고 : 부트 스트랩 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>
이는 동적으로로드 된 콘텐츠에서도 작동합니다. 예를 들어 데이터 테이블 과 함께 사용
허용되는 답변에 정밀도를 추가하고 싶습니다. 가독성을 위해 답변 형식을 사용하기로 결정했습니다.
참고 : Bootstrap 3.0 ~ 3.2 솔루션
Right now, wrapping your tooltip in a div is the solution, but it will need some modifications if you want your whole <td> to show the tooltip (because of Bootstrap CSS). A simple way to do it is to transfert <td>'s padding to 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'
});
});
If you are using datatable for table then it will be use full
$('#TableId').DataTable({
"drawCallback": function (settings) {
debugger;
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
}
});
You should initialize Tooltip inside datatable function fnDrawCallback
"fnDrawCallback": function (data, type, full, meta) { $('[data-toggle="tooltip"]').tooltip({ placement: 'right', title: 'heyo', container: 'body', html: true }); },
And define your column as below
{
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>";
}
},
If you're using bootstrap directives for AngularJS, use tooltip-append-to-body attribute.
<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>
참고URL : https://stackoverflow.com/questions/13268361/bootstrap-tooltip-and-popover-add-extra-size-in-table
'developer tip' 카테고리의 다른 글
| 내 화면에서 나가는 네이티브 텍스트에 반응하여 래핑을 거부합니다. (0) | 2020.10.09 |
|---|---|
| Java.util.Timer 클래스에서 예약 된 작업을 중지하는 방법 (0) | 2020.10.09 |
| 문자열 컬렉션에서 검색하는 가장 빠른 방법 (0) | 2020.10.09 |
| Ionic Framework를 사용하여 로그인 / 로그 아웃시 기록 지우기 및 페이지 다시로드 (0) | 2020.10.09 |
| Socket.IO 1.x 및 Express 4.x와 세션을 공유하는 방법은 무엇입니까? (0) | 2020.10.09 |