扫码一下
查看教程更方便
本章节我们介绍这些是标准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 方法显示元素的工具提示。 这被视为工具提示的“手动”触发。
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 方法隐藏元素的工具提示。 这被视为工具提示的“手动”触发。
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 方法切换元素的工具提示。
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 方法隐藏和销毁元素的工具提示(即删除存储在 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 方法使元素的工具提示能够显示。 默认情况下启用工具提示。
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 方法删除了显示元素工具提示的功能。 工具提示只有在重新启用后才能显示。
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 方法切换元素的工具提示显示或隐藏的能力。
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 方法更新元素工具提示的位置。
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(); }); });