5.6.1　声明式用法

提示框组件默认没有提示声明式的用法，作者对此的解释是，出于性能的问题才不提供的，所以如果要使用的话，需要自己使用JavaScript代码来初始化才行。尽管需要初始化，但HTML代码依然需要按照一定的规则来设置。首先，假设已经初始化了tooltip组件的功能。代码如下：

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

其HTML定义非常简单，必须要定义的属性就是初始化代码里指定的data-toggle="tooltip"属性，然后再定义要显示的内容。示例如下：

<a href="#" data-toggle="tooltip" data-original-title="这里是提示语的内容">链接</a>
<a href="#" data-toggle="tooltip" title="设置title也可以">链接</a>

由上述示例可以看出，提示语的内容可以通过两种形式设置，第一种是data-original-title，第二种是title。该组件将第一种的内容的优先级设置为最高，如果该属性没有值，才取title的值。

另外在声明式用法里还提供了7种自定义属性，这里先举个例子：placement，可以设置提示语相对于触发元素的显示位置。这次我们使用的是button按钮元素来触发行为。示例代码如下：

<button data-original-title="Tooltip on left" class="btn btn-default" 
data-toggle="tooltip" data-placement="left">左侧Tooltip</button>
 
<button data-original-title="Tooltip on top" class="btn " 
data-toggle="tooltip" data-placement="top">上方Tooltip</button>
 
<button data-original-title="Tooltip on bottom" class="btn " 
data-toggle="tooltip" data-placement="bottom">下方Tooltip</button>
 
<button data-original-title="Tooltip on right" class="btn " 
data-toggle="tooltip" data-placement="right">右侧Tooltip</button>

上述示例的运行效果如图5-10所示。

图5-10　不同方位的提示框效果

所有可用的自定义属性和解释如表5-9所示。

注意

❑在.btn-group 或 .input-group内的元素上使用tooltip时，需要指定container: 'body'选项，以避免不必要的副作用（例如，当tooltip显示之后，与其相关的页面元素可能变得更宽或去圆角）。

❑为了给disabled 或.disabled元素添加tooltip，将需要增加tooltip的页面元素包裹在一个<div>中，然后对这个<div>元素应用tooltip。