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

【问题标题】：tooltip the data-placement="right" is not working [edit]工具提示 data-placement="right" 不起作用[编辑]
【发布时间】：2022-03-14 23:37:15
【问题描述】：

首先，工具提示适用于所有方向，上、下和左。但是对于权利是行不通的。

所以我认为这可能是 CSS 或 HTML 结构的问题。（但是tooltip的位置是绝对的，所以不知道为什么会这样。）

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 自动引导推送您的文本。例如，如果您的工具提示位于窗口的右侧，则不能强制将其放在右侧。

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

代码

请检查代码here:

【问题讨论】：

你能创建 fiddle 或 stack sn-p 吗？
我会努力的，给我时间。
@20yco 完成：bootply.com/2zE4Zb3cva

标签： javascript bootstrap-4 tooltip

【解决方案1】：

问题是div的边距，看看：

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div data-toggle="tooltip" title="Gestión de Usuarios" class="theproblem">
    Hola mundo
    </div>
  </div>
	
</div>

还有Fiddle

【讨论】：

但是在这个example 中，您将它推向左侧并向右移动。 .
抱歉，换方向了
在您的示例中，我可以将其推到底部或右侧。但是向左或向上是不可能的
@ValRob 更改代码后不要忘记点击小提琴顶部的“运行”
是的，但是，它不能到顶部或左侧

【解决方案2】：

最佳解决方案：

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

  $(this).data('bs.tooltip').config.placement = 'right';// For dynamic position
  $(this).data('bs.tooltip').config.boundary= 'right'; // Used for tooltip boundary range
});

【讨论】：

【解决方案3】：

我对 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/

【讨论】：

【解决方案4】：

我认为您应该将展示位置放在元素的数据属性中：

<button data-toggle="tooltip" data-placement="left"> tooltip </button>

【讨论】：

【解决方案5】：

您应该将文本放在元素的数据属性中

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<li class="">
  <div class="hover-highlight ml-2">
    <a class="" href="#">
        <i data-toggle="tooltip" title="Dashboard" class="icon-meter">
          <span>Dasboard</span>
        </i>
      </a>
  </div>
</li>               
                
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

【讨论】：

【解决方案6】：

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

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

【讨论】：