qinyi素材网
当前位置: 首页 > WEB教程 > Bootstrap 4动态更改Tooltips的显示文案

Bootstrap 4动态更改Tooltips的显示文案

  时间: 2021-10-29   阅读:968
简要教程

动态更改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>
上一篇: 下一篇: