所以,伙计们,我实际上处于一种非常奇怪的境地,并且无论如何都无法弄清楚我的感觉是什么。所以情况是我实际上正在实施我的bootstrap工具提示,并且我已经在JsFiddle
上检查了它,它在那里工作正常,但是,经过很多努力,它没有在web项目上实现我不知道为什么。
这实际上非常奇怪。这是我在JsFiddle上正常工作的实现。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
$("[data-toggle=tooltip]").tooltip()
})
</script>
</head>
<body>
<section class="testimonial home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
</body>
对于解决方案,我做了很多事情但不幸的是,所有这些都没有用。
<script type="text/javascript">
$(document).ready(function (){
$(".btn-secondary").tooltip()
})
</script>
<script type="text/javascript">
$(document).ready(function (){
$("body").tooltip({
selector : '[data-toggle=tooltip]'
})
})
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".testimonial.home-page").tooltip({
selector : '[data-toggle=tooltip]',
container : 'body'
})
})
</script>
这就是我在我的网络项目上得到的:
不要误解我的意思,我真的很困惑为什么它没有发生,因为一切都很好。任何想法将不胜感激,我是一个菜鸟,我知道你们可以帮助我。
EDITS
我检查了控制台并得到了这个错误,说.tooltip不是一个函数:
你需要在tooltip
函数{container:'body', trigger: 'hover', placement:"bottom"}
中添加一些属性
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(
{container:'body', trigger: 'hover', placement:"bottom"}
);
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<section class="testimonial home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
</body>
解决方法就是这样,调用一些没有正确调用的jQuery文件时出错,因此整个项目搞乱了。因此,如果您使用popups
,tooltips
,请确保以正确的格式调用jquery。这是答案以及我如何使它工作,只需查看调用jQuery文件和相应的其他文件然后在正文中我调用了工具提示的脚本:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<!-- SLICK SLIDER-->
<link rel="stylesheet" type="text/css" href="assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="assets/slick/slick-theme.css"/>
<!-- MATERIAL ICONS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- jQuery first, then jQuery min.js, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<section class="testimonial home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
<script type="text/javascript">
$(document).ready(function (){
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
})
})
</script>
</body>
尝试以这种方式调用Tooltip函数并将选项作为HTML属性传递。你可以查看一些工作实例here。
<button class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Basic tooltip">Hover me</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
让我提供一个解决方案。试一试。它可能对你有用。首先,我的观点是工具提示不适用于“按钮”类型。但我不知道确切的原因。所以只需使用type =“submit”更改下面的type =“button”
底部的工具提示
绝对会对你有用。