Bootstrap5 工具提示问题答案

【问题标题】：Bootstrap5 tooltip issueBootstrap5 工具提示问题
【发布时间】：2022-12-06 01:12:01
【问题描述】：

我的网站使用 bootstrap 5，但是在使用工具提示时（从官方文档网站复制）：https://getbootstrap.com/docs/5.1/components/tooltips/#examples

我已经在 Google 和 Stackoverflow 上搜索了很多，但所有这些解决方案都不适合我，所以这就是我得到的：

我得到这个结果：

这个的状态：

我的 HTML 代码：

<li class="ms-3"><a class="text-muted bi-geo-alt" href="https://goo.gl/maps"
                                        target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom"
                                        title="Testing"></a></li>

我的包.json

 "dependencies": {
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.8.1"
},
"devDependencies": {
    "css-loader": "^6.7.1",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
},

我还将这些导入添加到我的 index.js 文件中：

import 'bootstrap/dist/css/bootstrap.min.css' // Bootstrap CSS
import 'bootstrap-icons/font/bootstrap-icons.css' // Bootstrap Icons

【问题讨论】：

您必须在 bootstrap.js 之前包含 popper.min.js 或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 才能使工具提示正常工作。我推荐你使用react-bootstrap.netlify.app

标签： css node.js tooltip bootstrap-5

【解决方案1】：

我想用文档https://getbootstrap.com/docs/5.2/components/tooltips/中的简单示例提出一个解决方案

不要忘记初始化工具提示。

!DOCTYPE html>     
<html>          
                
<head>              
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
                        
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
                        
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <script>                    
        $(document).ready(function() {
                $('[data-bs-toggle="tooltip"]').tooltip();
        });             
    </script>           
    <style>
    .custom-tooltip {
        --bs-tooltip-bg: gray;
    }
    </style>
</head>                 

<body>                          

<button type="button" class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-html="true" 
        data-bs-custom-class="custom-tooltip"   
        data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>                       
                        
</body>             
</html>

【讨论】：