5.6.2　JavaScript用法

5.6.2　JavaScript用法

tooltip组件的JavaScript用法有很多种，除了通用方式以外，其他都是直接调用相关的方法（后面源码里会提到），其初始化代码就像前面所说的，最简单的一种如下：

$('[data-toggle=tooltip]').tooltip();

当然，也可以单独指定一个元素，在该元素上调用Tooltip组件，并且还可以提供各种JavaScript形式的自定义参数，而无须使用以data-开头的元素自定义属性。用法如下：

// 通用方式，options可以定义其他属性
$('#element').tooltip(options);
// 例子：指定提示语内容和显示位置
$('#element').tooltip({
    title: "提示语内容",
    placement: 'top'
});

如果想改变提示语显示的模板风格，也可以自己再指定一个template属性。

另外，如果要操作tooltip的各种其他效果，比如：显示、关闭、反转等，则可以使用如下代码：

$('#element').tooltip('show');             // 显示提示语
$('#element').tooltip('hide');          // 关闭提示语
$('#element').tooltip('toggle');        // 反转提示语
$('#element').tooltip('destroy');       // 隐藏并销毁提示语

1.选项

在JavaScript用法下，所有可用的自定义属性和描述如表5-10所示。

5.6.2　JavaScript用法 - 图1

调用tooltip的时候，以上任何属性都可以在options里设置，以便制作出各种各样的效果。

2.事件

同Modal弹窗一样，下拉菜单也支持4种类型的事件订阅，分别对应下拉菜单的弹出前、弹出后、关闭前，关闭后，解释如表5-11所示。

5.6.2　JavaScript用法 - 图2

调用方式也很简单，和普通的jQuery代码并无二样。

$('#myTooltip').on('hidden.bs.tooltip', function () {
    // 处理代码…
})

其实，tooltip组件还有其他一些方法可以调用，但是一般使用的机会不多，就不详细解释了。具体的方法在下面的源码分析小节都会有注释的。

5.6.2 JavaScript用法