Bootstrap V5版本中tooltip用法

时光假寐

2021 年 06 月 06 日

908 次浏览

暂无评论

520字数

学习日记

Bootstrap升级V5版本后改进了一些东西，之前的用法不再适合更新的版本

本文只讨论其tooltip的改变

### 安装

- 本地`npm install bootstrap`, `yarn add bootstrap`
- Browser加载
- 选择其中一个

### Browser加载方法 with jsDelivr

第一种：

```html


<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://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
```

第二种：

```html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
```

### 用法

~~~html
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
~~~

最后修改：2021 年 06 月 06 日

如果觉得我的文章对你有用，请随意赞赏

Bootstrap V5版本中tooltip用法

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

揭秘亚马逊Amazon最新A+页面添加apng动态图片

[爬虫]亚马逊amazon产品、评论、ASIN详情爬虫，产品调研

亚马逊关键词推荐和查找工具Amazon Keyword Suggestion Tool

Awesome amazon seller tools - 亚马逊运营工具

统计亚马逊商品历史价格历史排名插件

亚马逊站外引流 - Deal系列（3）- [Vipon]

关于亚马逊明信片地址验证

综合解决opencart联系页面contact us邮件发送失败问题

统计亚马逊商品历史价格历史排名插件

在群晖里使用Docker[node.js]搭建VoceChat机器人服务，小白教程

Bootstrap V5版本中tooltip用法

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Bootstrap V5版本中tooltip用法

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款