Fatal编程技术网
  • javascript/
  • Javascript “引导”；工具提示“；及；“爆米花”；在表中添加额外的大小

Javascript “引导”；工具提示“；及；“爆米花”；在表中添加额外的大小

javascript twitter-bootstrap twitter-bootstrap-3

Javascript “引导”；工具提示“；及；“爆米花”；在表中添加额外的大小,javascript,twitter-bootstrap,twitter-bootstrap-3,tooltip,Javascript,Twitter Bootstrap,Twitter Bootstrap 3,Tooltip,注意： 根据您的引导版本（3.3之前或之前），您可能需要不同的答案。 注意笔记 在这段代码中，当我激活工具提示（将鼠标悬停在单元格上）或弹出框时，表的大小会增加。我怎样才能避免这种情况 此处为emptyRow-函数，用于生成带有100的tr <html> <head> <title></title> <script type="text/javascript" language="javascript" src="https:

注意：
根据您的引导版本（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>


#矩阵td{
宽度：10px；
高度：10px；
边框：1px纯色灰色；
填充：0px；
}
函数emptyRow（）{
str=''
对于（j=0；j<100；j++）{
str+=''
}
str+=''
返回str
}
$（文档）.ready（函数（）{
$（“#矩阵tr:last”）。在（emptyRow（）之后
$（“[rel=tooltip]”）。tooltip（）；
});
谢谢你的建议

注意：Bootstrap 3.0~3.2的解决方案

您需要在
td
内创建一个元素，并对其应用工具提示，例如，因为工具提示本身是一个div，当它放置在
td
元素之后时，它会停止表格布局

这个问题是在最新版本的Bootstrap中引入的。目前正在进行有关修复的讨论。希望下一个版本包括固定的文件。

我想对接受的答案增加一些精度，我决定使用答案格式以便于阅读

注意：Bootstrap 3.0~3.2的解决方案

现在，但是如果您希望整个
显示工具提示（由于引导CSS），则需要对其进行一些修改。一种简单的方法是将t
的填充转移到包装器：

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'）。每个（函数（e）{
var p=$（this.parent（）；
如果（p.is（'td'））{
/*如果您的工具提示位于上，请将的填充转移到包装器*/
$（this.css（'padding'，p.css（'padding'））；
p、 css（'padding'，'0'）；
}
$（此）。工具提示({
切换：“工具IP”，
位置：'底部'
});
});
注意：Bootstrap 3.3的解决方案+

简单解 在
.tooltip（）
调用中，将
容器
选项设置为
主体
：

$(function () {
  $('[data-toggle="tooltip"]').tooltip({
    container : 'body'
  });
});
或者，您也可以使用
数据容器
属性执行相同操作：

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

一些文本
为什么这样做有效？ 这解决了问题，因为默认情况下，工具提示具有
display:block
，并且元素插入到调用它的位置。由于显示：块，在某些情况下会影响页面流，即向下推其他元素

通过将容器设置为body元素，工具提示将附加到body而不是调用它的位置，因此它不会影响其他元素，因为没有任何东西可以“向下推”

注意：Bootstrap 3.3的解决方案+

如果要避免在将工具提示应用于
元素时破坏表格，可以使用以下代码：

    $(function () {
        $("body").tooltip({
            selector: '[data-toggle="tooltip"]',
            container: 'body'
        });
    })
您的html可以如下所示：

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


表单元格内容
这甚至适用于动态加载的内容。例如，在与

一起使用时，您应该初始化数据表函数内部的工具提示fnDrawCallback

“fnDrawCallback”：函数（数据、类型、完整、元）{
$（'[data toggle=“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>";
    }
 },

{
目标：2，
“呈现”：函数（数据、类型、完整、元）{
var htmlBuilder=“”+data+”
说明：
“+full[“longsdescripoption”]+”
”；
返回“”+
""+
"";
}
},
如果您对表使用datatable，则它将被完全使用

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

                }
            });
如果您正在为AngularJS使用引导指令，请使用工具提示附加到body属性

<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>
您的额外尺码到底是什么意思？js在预定义的空行下的一行中生成100个单元格。我已经创建了一个@Devellar，在激活工具提示时大小增加（悬停在单元格上方）@MikhaillErofeev我也有同样的问题，如果你解决了，请告诉我me@RonakJangir，见答案below@MikhaillErofeev我只想在td上添加工具提示，所以这个答案对我没有用处。到目前为止，该解决方案已提交到twitter引导，请参见GitHub链接：从v2.3.x开始的解决方案是将tooltip/popover的容器选项设置为body。例如：$（…）.tooltip（{container:'body'}）；或者在HTML:data container=“body”@Domenic中使用data-*属性，这应该是一个答案，然后标记为正确的解决方案。只是工作。请添加这个作为一个答案，更容易为未来的开发谢谢！非常好。谢谢！！data toggle=“tooltip”选项有效，但容器：“body”选项无效。非常感谢，这节省了我的时间：）如果您的表处于模式，则此选项无效，因为工具提示显示在页面中的某个位置（可能我还没有找到它）。警告买主。不过，接受的答案仍然有效，只需将td内容包装在一个div中并应用工具提示即可。如果您希望整体显示工具提示，只需将工具提示直接应用于td即可element@shock_gone_wild这不是重点。将工具提示应用于任何
元素将破坏整个表格，如原始问题和每个答案中所述。这就是为什么我们都选择在其中添加另一个元素。也就是说，我不知道Bootstrap 4的新奇之处，这个bug可能已经被修复了。不，如果添加容器：“body”，它不会打破表格。请看我的答案。
容器
已关闭 
<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>