Question

我在我的元素上添加了bootstrap tooltip参数：

<input type="text" name="appbundle" data-toggle="tooltip" data-placement="top" title="My title" class="form-control">

我还添加了以下脚本：

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

嗯，工具提示正在显示，但它不符合数据放置参数：它始终位于控件的底部。

我看到定位存在一些问题，但我发现的很多都是很久以前的事了，现在我已经开始使用3.3.1。

有关如何解决此问题的任何线索？

编辑：这是一个示例代码，其中包含我正在使用的相同库。仍然没有工作

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="vendor/bootstrap-3.3.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="vendor/bootstrap-3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="vendor/jquery-ui-1.11.2/jquery-ui.min.css">
    <link rel="stylesheet" href="vendor/jquery-ui-1.11.2/jquery-ui.structure.min.css">
    <link rel="stylesheet" href="vendor/jquery-ui-1.11.2/jquery-ui.theme.min.css">
</head>

<body>
    <script src="vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
    <script src="vendor/bootstrap-3.3.1/js/npm.js"></script>
    <script src="vendor/jquery/jquery-2.1.1.min.js"></script>
    <script src="vendor/jquery-ui-1.11.2/jquery-ui.min.js"></script>

    <p>test</p>
    <br>
    <input type="text" name="appbundle" data-toggle="tooltip" data-placement="top" title="My title" class="form-control">

<script>
    $(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
</body>

Answer 1

发现它！

我在jquery ui之前添加了bootstrap js，这导致了这个问题。其他一些图书馆也是如此。

将bootstrap js放在最后！

Answer 2

就我而言，问题来自overflow风格。

在此示例中，当我为overflow: auto元素设置.container1时，工具提示消息将显示为错误。

自从我将其从.container2中删除后，此问题已解决。

$(document).ready(function () {
  $('[data-toggle="tooltip"]').tooltip().tooltip('show');
});

[class^=container] {
  margin: 50px;
  height: 30px;
}

.container1 {
  overflow: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container1">
  <button type="button" data-toggle="tooltip" data-placement="top" title="This is a title">Hover me</button>
</div>

<div class="container2">
  <button type="button" data-toggle="tooltip" data-placement="top" title="This is a title">Hover me</button>
</div>

Answer 3

使用jquery和bootstrap js文件的此顺序

<script type="text/javascript" src="js/jquery-ui.js"></script>
<script src="js/bootstrap.min.js" ></script>

bootstrap工具提示不考虑数据放置参数

3 个答案: