logo标签列表

提示框的数据位置"data-placement="right""无法正常工作[编辑]。

javascriptbootstrap-4tooltip
8

首先，工具提示对于所有方向都有效，包括顶部、底部和左侧。但是对于右侧则不起作用。

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

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推送您的文本。例如，如果您的工具提示在窗口右侧，您无法强制将其放置在右侧。

我不知道如何修复此行为。

代码

请检查此处的代码。

你能创建 Fiddle 或 Stack Snippet 吗？ - 20yco
我会尝试的，请给我时间。 - ValRob
@20yco 完成了：https://www.bootply.com/2zE4Zb3cva - ValRob
7个回答
7
6
如果有人在未来遇到类似问题，以下解决方法或许能帮助到你：将边界设置为“window”，这样可以防止工具提示被限制在其父元素内。更多选项请参考https://getbootstrap.com/docs/4.0/components/tooltips/#options。
<button title="tooltip text" data-toggle="tooltip" data-placement="right" data-boundary="window">
谢谢你的建议！使用 data-boundary="window" 真帮了我大忙！！！！ - Kjell Inge Hestad
4
问题在于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>

also Fiddle

在你的例子中，我可以将它推到底部或右侧。但是向左或向上是不可能的。 - ValRob
@ValRob 在修改代码后不要忘记点击 Fiddle 顶部的“运行”按钮。 - 20yco
让我们在聊天中继续这个讨论。 - ValRob
是的，谢谢。看起来它需要一定的空间才能显示工具提示。因此解决方案是给父元素一个更大的尺寸。 - ValRob
@ValRob 是的，请不要忘记点赞，不仅仅是选为答案。 - 20yco
显示剩余5条评论
1
最佳解决方案：
$('[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
});
0
你应该将文本放在元素的数据属性中。 

$(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>

0

我曾经遇到过同样的问题，原因是父元素的溢出设置为自动（overflow: auto）。所以我将其从 overflow: auto 改为了 overflow: visible，问题得以解决。

-1

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

<button data-toggle="tooltip" data-placement="left"> tooltip </button>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接