Примечание.
В зависимости от вашей версии Bootstrap (до 3.3 или более ранней) вам может потребоваться другой ответ.
Обратите внимание на примечания.
Когда я активирую всплывающие подсказки (наведите указатель мыши на ячейку) или всплывающие окна в этом коде, размер таблицы увеличивается. Как мне этого избежать?
Здесь emptyRow - функция для генерации tr со 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>
благодарю в совет!
Ответы:
Вам нужно создать элемент внутри
tdи применить подсказку к нему, как это , потому что сам по себе подсказка является ДИВ, и когда он будет помещен после того,tdэлемента его расположения тормоза таблицы.Эта проблема появилась в последней версии Bootstrap. Здесь продолжаются обсуждения исправлений на GitHub . Надеюсь, в следующей версии будут исправлены файлы.
источник
Простое решение
В
.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, всплывающая подсказка добавляется к телу вместо того, откуда она была вызвана, поэтому она не влияет на другие элементы, потому что нет ничего, что можно было бы «подтолкнуть».
источник
Если вы не хотите разбивать таблицу при применении всплывающей подсказки к
<td>элементу, вы можете использовать следующий код:$(function () { $("body").tooltip({ selector: '[data-toggle="tooltip"]', container: 'body' }); })Ваш html может выглядеть так:
<td data-toggle="tooltip" title="Your tooltip data"> Table Cell Content </td>Это работает даже с динамически загружаемым контентом. Например, используется с таблицами данных
источник
Я хотел бы добавить немного точности к принятому ответу, я решил использовать формат ответа для читабельности.
Прямо сейчас можно обернуть всплывающую подсказку в 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' }); });источник
<td>элементу приведет к поломке всей таблицы, как указано в исходном вопросе, и в каждом ответе. Вот почему мы все решили добавить в него еще один элемент. Тем не менее, я не знаю о новинках Bootstrap 4, и эта ошибка, возможно, была исправлена.containerБыло введено в 2014 году, через 2 года после этого вопроса. Спасибо за ваш комментарий, я внесу несколько изменений, чтобы выделить эту опцию и уточнить, что эта ошибка не связана с последними версиями Bootstrap.Вы должны инициализировать всплывающую подсказку внутри функции с данными fnDrawCallback
"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>"; } },источник
Если вы используете datatable для таблицы, тогда он будет использоваться полностью
$('#TableId').DataTable({ "drawCallback": function (settings) { debugger; $('[data-toggle="tooltip"]').tooltip({ container: 'body' }); } });источник
Если вы используете директивы начальной загрузки для AngularJS, используйте атрибут tooltip-append-to-body.
<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>источник