bootstrap5 工具提示方法——迹忆客-ag捕鱼王app官网

本章节我们介绍这些是标准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: "
 hello, i'm smiley!
",  
        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: '
 important info
'
    });
});

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

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();
    });
});

getinstance

这是一个静态方法，我们可以使用它获取与 dom 元素关联的工具提示实例。

document.addeventlistener("domcontentloaded", function(){
    var btn = document.getelementbyid("mybtn");
    var element = document.getelementbyid("mytooltip");
    // trigger the tooltip
    var mytooltip = new bootstrap.tooltip(element);
    // get tooltip instance on button click
    btn.addeventlistener("click", function(){        
        var tooltip = bootstrap.tooltip.getinstance(element);
        console.log(tooltip);
        // {_element: a#mytooltip, _isenabled: true, _timeout: 0, _hoverstate: "", _activetrigger: {…}, …}
    });
});

getorcreateinstance

这是一个静态方法，我们可以使用它获取与 dom 元素关联的工具提示实例，或者在工具提示未初始化的情况下创建一个新实例。

document.addeventlistener("domcontentloaded", function(){
    var btn = document.getelementbyid("mybtn");
    var element = document.getelementbyid("mytooltip");
    
    // get or create tooltip instance on button click
    btn.addeventlistener("click", function(){        
        var tooltip = bootstrap.tooltip.getorcreateinstance(element);
        console.log(tooltip);
        // {_element: a#mytooltip, _isenabled: true, _timeout: 0, _hoverstate: "", _activetrigger: {…}, …}
    });
});

提示 ：不能在类的实例（即对象）上调用静态方法。 他们被称为类本身。 关键字 static 用于为类定义静态方法。