Question

我正在使用 Bootstrap 5 工具提示。它工作正常，但缺少工具提示箭头。工具提示更像是一个块。

这是我的代码：

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


<script>
    $(document).ready(function(){
        $('[data-bs-toggle="tooltip"]').tooltip({'placement': 'bottom'});
    });
</script>
</head>
<body>

            <button class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
        
</div>
</body>
</html>

知道为什么会这样吗？

PS：当我更改为引导程序版本 4 时，箭头会显示。但是对于我的项目，我需要使用 Bootstrap 5。

Answer 1

您正在使用 Bootstrap 4

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>

改为使用它会起作用：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Bootstrap 5 工具提示箭头丢失

1 个答案: