工具提示 data-placement="right" 不起作用[编辑]

Question

首先，工具提示适用于所有方向，顶部、底部和左侧。但对于右边是行不通的。

所以我认为这可能是 CSS 或 HTML 结构的问题。（但是工具提示处于绝对位置，所以我不知道为什么会发生这种情况。）

超文本标记语言

<li class="">
    <div class="hover-highlight ml-2">
        <a class="" href="#">
            <i data-toggle="tooltip"  title="Dashboard" class="icon-meter"></i>
            <span>Dasboard</span>
        </a>
    </div>
</li>

在javascript中我这样做：

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        placement: 'right'
    });
});

就像我说的，对于任何其他位置，它都工作得很好。但对于右派来说，它破裂了！

事实上，我不知道为什么，但它是用左边的属性渲染的：

<div class="tooltip fade show bs-tooltip-left" role="tooltip" id="tooltip558151" style="position: absolute; transform: translate3d(125px, 207px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left">
    <div class="arrow" style="top: 8px;" />
    <div class="tooltip-inner">Dashboard</div>
</div>

问题

好吧，我发现问题了。看起来像自动引导程序根据父 div 推送您的文本。例如，如果您的工具提示位于窗口的右侧，则不能强制将其放置在右侧。

我不知道如何解决这个问题。

代码

请检查此处的代码：

Answer 1

我很困惑 bootstrap4 使用“ data-toggle ”和“ data-placement ”与 bootstrap5 使用“ data-bs-toggle ”和“ data-bs-placement ”之间的差异。

• https://getbootstrap.com/docs/4.0/components/tooltips/ https://getbootstrap.com/docs/5.0/components/tooltips/

Answer 2

如果这对将来到达这里的任何人有帮助，我遇到的类似问题的解决方案是将边界设置为“窗口”，以防止工具提示被限制在其父级内。有关其他选项，请参阅https://getbootstrap.com/docs/4.0/components/tooltips/#options 。

<button title="tooltip text" data-toggle="tooltip" data-placement="right" data-boundary="window">

Answer 3

问题是div的边距，看一下：

\n\n

\r\n

\r\n

$(document).ready(function() {\r\n    $("body").tooltip({ selector: \'[data-toggle=tooltip]\',placement: \'top\' });\r\n});

\r\n

.theproblem {\r\n  margin-left:140px;\r\n  margin-top:140px;\r\n}

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>\r\n<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>\r\n<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>\r\n\r\n<div class="container">\r\n  <div class="row">\r\n    <div data-toggle="tooltip" title="Gesti\xc3\xb3n de Usuarios" class="theproblem">\r\n    Hola mundo\r\n    </div>\r\n  </div>\r\n\t\r\n</div>

\r\n

\r\n

\r\n

\n\n

还有小提琴

\n