Bootstrap 工具提示位置错误

Question

我有一个简单的 laravel 应用程序，我喜欢在其中使用 bootstrap 工具提示。

Table:

            <table id="tableSequence" class="table" style="font-size: 12px">
                    <tr style="font-weight: 600">
                            <td data-toggle="tooltip" data-placement="top" title="Tooltip on left">EZ</td>
                            <td>MZ</td>
                            <td>WZ</td>
                            <td>EP</td>
                            <td>MP</td>
                            <td>WP</td>
                            <td>SZ</td>
                            <td>TZ</td>
                            <td>SP</td>
                            <td>TP</td>
                    </tr>

JS

    $(function(){

    $('[data-toggle="tooltip"]').tooltip({

    });

});

当我吸尘器 EZ 时，工具提示显示在屏幕左侧：

我是否必须添加额外的代码才能将工具提示放在对象附近？

Answer 1

尝试将 data-placement 更改为顶部以外的位置。这个问题与您的布局有关。给 link 进行测试。可以更好的解决。

Answer 2

我无法让它与 bootstrap 一起工作。因此我使用了 Toltipster 现在一切正常！

Answer 3

你可以在这里查看我针对相同问题的简单解决方案：

Answer 4

在我的例子中，问题是 jQuery UI 库的存在，因为它处理同名的类，最终与 bootstrap 的工具提示样式和 plecement。我只需要将其删除即可解决问题。

Bootstrap 工具提示位置错误

Bootstrap tooltip wrong position

tooltip

twitter-bootstrap