Question

我尝试将html工具提示添加到现有页面中，该页面由页面一侧的表格和另一侧的其他内容组成。我想将工具提示添加到表中的每个td。

每当我将鼠标悬停在td上时，每个td都会添加一个工具提示，整个表格会移动一个单元格！

另外，只在chrome上尝试过。

在悬停之前 enter image description here

当我将鼠标悬停在第一个td上时 enter image description here

下面是一个减少，但完全有效的奇怪的例子，任何想法赞赏。

<!DOCTYPE html>
<html>
    <head lang="en">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="table-responsive" id="23">
                        <TABLE class="table table-bordered table-nonfluid">
                            <tr id="hdr" class="bg-primary h5">
                                <th class="text-center">Mon 18 May</th>
                                <th class="text-center">Thu 21 May</th>
                            </tr>
                            <tr id="day" class="text-center">
                                <td class="bg-danger" 
                                    data-trigger="hover" 
                                    data-placement="auto" 
                                    data-html="true" 
                                    data-title="<div>WHAT!</div>"
                                    data-toggle="tooltip"
                                    >
                                    <sup>300</sup>/<sub>312</sub>
                                </td>
                                <td class="bg-danger"
                                    data-trigger="hover" 
                                    data-placement="auto" 
                                    data-html="true" 
                                    data-title="<div>WHAT!</div>"
                                    data-toggle="tooltip"
                                 >
                                 <sup>277</sup>/<sub>312</sub></td>
                            </tr>
                        </TABLE>
                    </div>
                </div>
                <div class="col-md-6 " style="padding-top: 16px;">
                    <blockquote id="comment_txt">before, after and then on</blockquote>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script>
            $( document ).ready(function() {
                 $('[data-toggle="tooltip"]').tooltip()
            });
        </script>
    </body>

</html>

Answer 1

我建议将你的td内容包含在这样的范围内

 <td><span data-trigger="hover" style="display:block"
                                data-placement="auto" 
                                data-html="true" 
                                data-title="<div>WHAT!</div>"
                                data-toggle="tooltip"><sup>300</sup>/<sub>312</sub></span></td>

直接在表格元素上使用工具提示永远不是一个好主意。

Answer 2

实际上，这是一个奇怪的问题。直到现在才意识到它。这可能不是一个完美的修复方法，但临时修复将在span的文本周围放置td左侧的文本和{{1}在右边留下它现在是因为它工作正常只有左边的一个导致这个问题。

Bootply Link right here

td

我的修复问题很简单。如果您将<div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="table-responsive" id="23"> <TABLE class="table table-bordered table-nonfluid"> <tr id="hdr" class="bg-primary h5"> <th class="text-center">Mon 18 May</th> <th class="text-center">Thu 21 May</th> </tr> <tr id="day" class="text-center"> <td class="bg-danger" > <span data-trigger="hover" data-placement="auto" data-html="true" data-title="WHAT!" data-toggle="tooltip"> <sup>300</sup>/<sub>312</sub> </span> </td> <td class="bg-danger" data-trigger="hover" data-placement="auto" data-html="true" data-title="<div>WHAT!</div>" data-toggle="tooltip" > <sup>277</sup>/<sub>312</sub></td> </tr> <tr id="day" class="text-center"> <td class="bg-danger" > <span data-trigger="hover" data-placement="auto" data-html="true" data-title="WHAT!" data-toggle="tooltip"> <sup>300</sup>/<sub>312</sub> </span> </td> <td class="bg-danger" data-trigger="hover" data-placement="auto" data-html="true" data-title="<div>WHAT!</div>" data-toggle="tooltip" > <sup>277</sup>/<sub>312</sub></td> </tr> </TABLE> </div> </div> <div class="col-md-6 " style="padding-top: 16px;"> <blockquote id="comment_txt">before, after and then on</blockquote> </div> </div> </div>上的文字悬停在tooltip本身的文本上，td只会显示在左侧cell，而table-cell会显示在tooltip将鼠标悬停在右侧的table cell上。对于用户体验不好我知道，但这就像我说的临时修复一样。

twitter bootstrap html工具尖端奇怪

2 个答案:

Bootply Link right here