动态更改bootstrap4的提示冒泡文案，需要使用JavaScript动态更改title参数。
Tooltips使用方法
使用前提：
Tooltip提示冒泡组件依赖于 Popper.js ，你必须将popper.min.js 文件放在 bootstrap.js之前调用，或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js这两个已经包含了 Popper.js 的脚本。
初始化
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})只要包含有data-toggle="tooltip"的元素，鼠标移动上去都会出现提示冒泡。
动态更改显示文案
主要实现代码↓
// 第一种方法
$('.copy').attr('title',"Copied!").tooltip('dispose').tooltip('show').on('hidden.bs.tooltip', function () {
$('.copy').attr('title',"Copy to clipboard").tooltip('dispose').tooltip();
});
// 第二种方法
$('[data-toggle="tooltip"]').tooltip('dispose').tooltip({title: 'Copied!'}).tooltip('show').on('hidden.bs.tooltip', function () {
$('[data-toggle="tooltip"]').tooltip('dispose').tooltip({title: 'Copy to clipboard'});
});使用例子简介：鼠标聚焦Copy按钮时，提示冒泡显示Copy to clipboard。点击Copy的时候，提示文案更改为Copied!，鼠标再次移动聚焦时，还原为Copy to clipboard
演示HTML代码
title可以通过数据属性或JavaScript传递选项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
<title>Bootstrap 4动态更改Tooltips的显示文案_qinyi素材网-免费分享</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
crossorigin="anonymous">
</head>
<style>
.exl {
padding: 1.5rem;
margin-right: 0;
margin-left: 0;
border-width: .2rem;
border: solid #f8f9fa;
border-width: .2rem 0 0;
}
</style>
<body>
<div class="exl">
<button type="button" class="copy btn btn-secondary" data-toggle="tooltip" data-placement="top" data-clipboard-target="#foo">
Copy
</button>
</div>
<div><input class="form-control" id="foo" value="to be or not to be"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
<script>
$('[data-toggle="tooltip"]').tooltip({title: 'Copy to clipboard'});
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function (e) {
// 第一种
// $('.copy').attr('title',"Copied!").tooltip('dispose').tooltip('show').on('hidden.bs.tooltip', function () {
// $('.copy').attr('title',"Copy to clipboard").tooltip('dispose').tooltip();
// });
// 第二种
$('[data-toggle="tooltip"]').tooltip('dispose').tooltip({title: 'Copied!'}).tooltip('show').on('hidden.bs.tooltip', function () {
$('[data-toggle="tooltip"]').tooltip('dispose').tooltip({title: 'Copy to clipboard'});
});
});
clipboard.on('error', function (e) {
console.log(e);
});
</script>
</html>
