gpt4 book ai didi

javascript - 工具提示数据放置 ="right"不工作[编辑]

转载 作者:行者123 更新时间:2023-11-30 08:20:43 24 4
gpt4 key购买 nike

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

所以我认为这可能是 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'
});
});

正如我所说,对于任何其他展示位置,它都运行良好。但是右边它坏了!

其实我也不知道为什么,就是用left属性渲染:

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

问题

好的,我找到问题了。看起来像自动 Bootstrap 根据父 div 推送您的文本。例如,如果您的工具提示位于窗口右侧,则您无法强制将其置于右侧。

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

代码

请检查代码here:

最佳答案

问题出在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

关于javascript - 工具提示数据放置 ="right"不工作[编辑],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54091272/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com