Question

嗨，我有以下代码

<?php require_once('header.php')?>

Header looks like this
    <!--vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="custom.js"></script>

custom.js中有这行

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

最后我有一个看起来像的表格

<div id="signupApp">
<div class="container">
<div class="row">
    <div class="col-md-6 col-md-offset-3">
    <form>
    <h2>Sign Up</h2>

        <!--Username-->
        <div class="form-group has-feedback">
        <label for="userName">Username*</label>
            <input v-model="userName" placeholder="Username" v-on:focus="showusernamerequirements" id="userName" class="form-control" id="userName">
            <span v-show="usernameLength==true && usernameHasCap==true && usernameHasNum==true && userexist==false" class="glyphicon glyphicon-ok form-control-feedback success" data-toggle="tooltip" data-placement="bottom" title="Valid"></span>
        </div>
        </form>
    </div>
    </div>
    </div>
</div>

但是我有一个问题，为什么世界上的工具提示无法正常工作？我应该能够将鼠标悬停在复选标记上，并看到提示“有效”的工具提示。但是我没有。有什么想法吗？我是否需要移动我的CDN链接？非常感谢您，在这里提供任何帮助！我确信这可能真的很愚蠢，我已经错过了一些简单明了的东西，但是我已经花了整整一个半小时的时间，我很乐意提供帮助。

Answer 1

工具提示依赖于第三方库Popper.js进行定位。您必须在bootstrap.js之前包含popper.min.js或使用包含Popper.js的bootstrap.bundle.min.js / bootstrap.bundle.js才能使工具提示起作用！

引导工具提示在表单中不起作用

1 个答案: