简体   繁体   English

为什么我的引导工具提示不起作用?

[英]Why are my bootstrap tooltips not working?

Bevor i use a plugin for Bootstrap i always test it before. 希望我在Bootstrap中使用一个插件,但我始终会对其进行测试。 This is why my html is so simple. 这就是为什么我的html如此简单的原因。 It would be great if you could help me out with my tooltips. 如果您能用我的工具提示帮助我,那将是很棒的。

Ps: i am really new to coding Websites 附:我真的是编码网站的新手

HTML: HTML:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Basis-Vorlage</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip links">Tooltip links</button>

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>


</body>
</html>

Try this code 试试这个代码

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap-Basis-Vorlage</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip links">Tooltip links</button>




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>

</body>
</html>

my first attempt to resolve bootstrap tooltip issues is to change the selector 解决引导工具提示问题的第一个尝试是更改选择器

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

it's also possible that the tooltip is working, but isn't placed in front of your div 工具提示也可能有效,但没有放在div的前面

.tooltip({ container: 'body' }) 

https://stackoverflow.com/a/31811884/3511012 https://stackoverflow.com/a/31811884/3511012

Why are my bootstrap tooltips not working? 为什么我的引导工具提示不起作用?

Because you initialize the jquery and bootstrap scripts after the code where you try to initialize the tooltip via jQuery. 因为您在尝试通过jQuery初始化工具提示的代码之后初始化了jquery和bootstrap脚本。 Swap them around. 交换他们。 Scripts first, then your custom code. 首先是脚本,然后是您的自定义代码。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM