教程 > Bootstrap 4 教程 > Bootstrap 4 高级 阅读：59

Bootstrap4 工具提示方法

本章节我们介绍这些是标准bootstrap程序的工具提示方法。

传递选项

我们还可以使用 options 对象将选项传递给 tooltips 方法。

以下示例如果所选元素中的 title 属性值被省略或缺失，将动态设置工具提示的标题文本：

document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        title : "It looks like title attribute is not present."
    });
});

尝试一下

以下示例将展示如何将 HTML 内容放置在工具提示中：

document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        title: "<h4><img src='images/smiley.png' width='30' alt='Smiley'> Hello, <b>I'm</b> <i>Smiley!</i></h4>",  
        html: true
    });
});

尝试一下

以下示例将展示如何使用工具提示的延迟选项通过 JavaScript 动态控制显示和隐藏工具提示的时间。

document.addEventListener("DOMContentLoaded", function(){
    var tinyTrigger = document.getElementById("tinyTooltip");
    var largeTrigger = document.getElementById("largeTooltip");
        
    // Showing and hiding tooltip with same speed
    var tinyTooltip = new bootstrap.Tooltip(tinyTrigger, {
        delay: 100
    });
    
    // Showing and hiding tooltip with different speed
    var largeTooltip = new bootstrap.Tooltip(largeTrigger, {
        delay: {show: 0, hide: 2000}
    });
});

尝试一下

以下示例将展示如何为 Bootstrap 工具提示创建自己的自定义模板，而不是通过 JavaScript 动态使用默认模板。

document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-head"><h3><i class="bi-info-circle"></i> Important Info</h3></div><div class="tooltip-inner"></div>'
    });
});

尝试一下

下面的示例将在 #wrapper 元素的末尾插入工具提示的动态生成的 HTML 代码，而不是默认的 <body> 元素。

document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myTooltip");
    var tooltip = new bootstrap.Tooltip(element, {
        container: "#wrapper"
    });
});

尝试一下

注意 ：覆盖工具提示的默认容器选项值不会在页面上产生任何可见的差异。 要查看实际结果，我们需要检查 DOM。 按 Ctrl+Shift+I (Windows / Linux) 或 Cmd+Opt+I (Mac) 打开开发者工具或 DOM Inspector。

同样，我们可以为工具提示设置其他选项。 我们来看看 Bootstrap 工具提示插件的其他方法。

show

show 方法显示元素的工具提示。 这被视为工具提示的“手动”触发。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.show();
    });
});

尝试一下

hide

hide 方法隐藏元素的工具提示。 这被视为工具提示的“手动”触发。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.hide();
    });
});

尝试一下

toggle

toggle 方法切换元素的工具提示。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.toggle();
    });

尝试一下

dispose

dispose 方法隐藏和销毁元素的工具提示（即删除存储在 DOM 元素上的数据）。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.dispose();
    });
});

尝试一下

enable

enable 方法使元素的工具提示能够显示。 默认情况下启用工具提示。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.enable();
    });
});

尝试一下

disable

disable 方法删除了显示元素工具提示的功能。 工具提示只有在重新启用后才能显示。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.disable();
    });
});

尝试一下

toggleEnabled

toggleEnabled 方法切换元素的工具提示显示或隐藏的能力。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.toggleEnabled();
    });
});

尝试一下

update

update 方法更新元素工具提示的位置。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myTooltip");

    // Create a tooltip instance
    var myTooltip = new bootstrap.Tooltip(element);

    btn.addEventListener("click", function(){
        myTooltip.update();
    });
});

尝试一下

查看笔记

扫码一下
查看教程更方便