Bootstrap 5 tooltip功能正常但提示框箭头缺失问题咨询

• 版本不兼容：当前代码引入了Bootstrap 5的CSS样式文件，但加载的是Bootstrap 4的JS脚本文件。Bootstrap 5重构了tooltip组件的DOM结构生成逻辑，新增了箭头专属的样式类与DOM节点规则，Bootstrap 4的JS无法生成符合Bootstrap 5 CSS要求的箭头结构，直接导致箭头缺失。
• 语法错误：按钮元素开标签为<button>，结束标签误写为</a>，会造成DOM解析异常，可能额外引发样式渲染问题。

1. 替换为匹配版本的Bootstrap 5 JS文件
   替换原有Bootstrap 4的JS引入地址，使用对应版本的Bootstrap 5 bundle JS（已内置tooltip依赖的Popper.js，无需额外引入）。
2. 修正HTML标签语法错误
   将按钮的结束标签</a>改为</button>。
3. 可选：保持初始化配置与Bootstrap 5 API兼容
   若不需要特殊配置，可直接用默认初始化方法，避免配置项版本不兼容问题。

<!DOCTYPE html>
<html>
<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>
<!-- 替换为Bootstrap5对应版本的bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){
        $('[data-bs-toggle="tooltip"]').tooltip({'placement': 'bottom'});
    });
</script>
</head>
<body>
    <div>
        <!-- 修正结束标签错误 -->
        <button class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sofia Lazrak