时间戳

首页 > 解决方案 > 引导工具提示在表单中不起作用

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

问题描述

嘿伙计们，我有以下代码

<?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 链接吗？这里的任何帮助都会非常感谢你！我确信这可能是一件非常愚蠢的事情，我错过了一些简单而明显的事情，但我已经搞砸了一个半小时，我会很感激你的帮助。

标签： jquerytwitter-bootstrap-3vuejs2tooltip

解决方案

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

推荐阅读