我一直没有调试出来,包裹引入tether.min.js仍然无法出发效果。
mark着,回头再看。先熟悉文档。
概述
在使用提示冒泡插件的时候你需要知道这些:
提示冒泡依赖第三方库Tether实现定位。你必须在bootstrap.js之前调用 tether.min.js,才能使提示冒泡起作用。
出于性能的原因,提示冒泡是选择性加入的,所以你必须自己初始化它们。
标题零长度的提示冒泡不会显示出来。
指定
container: 'body'
以避免复杂组件(比如说输入框组,按钮组,等等)中的渲染问题。在隐藏的元素上触发的提示冒泡不会起作用。
如果从一个跨多行的链接上触发提示冒泡,提示冒泡将居中。在
<a>
上使用white-space:nowrap;
可以避免这种情况。
示例:在任何地方启用提示冒泡
在网页上初始化所有的提示冒泡的一个途径是用data-toggle
属性选中它们:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
示例
我出不来效果。
静态演示
哎。
互动演示
尴尬。
用法
提示冒泡插件根据需要生成内容和标记,默认将提示冒泡放在触发元素后面。
利用JavaScript触发提示冒泡:
$('#example').tooltip(options)
标记
如果你想要一个提示冒泡,只有HTML元素中的data
属性和title
属性是必不可少的标记。提示冒泡生成的标记很简单,虽然它确实需要一个位置(默认情况下被插件设置为顶部)。
<br>
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
话虽如此,但不出效果。
选项
可以利用data属性或者JavaScript传递选项。如果用data属性,请把选项名追加到data-
后面,比如说写成data-animation=""
。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animation | boolean | true | 对提示冒泡应用一个CSS褪色过渡 |
container | string | false | false | 向一个特定元素追加提示冒泡。示例: |
delay | number | object | 0 | 延迟显示或延迟隐藏提示冒泡(以毫秒计)——它不会应用到人为触发类型。 如果向这个选项提供一个数字,显示和隐藏都会应用这个延迟。 对象结构是 |
html | boolean | false | 向提示冒泡插入HTML。如果值为false,将使用jQuery的text 方法向DOM插入内容。如果你担心跨站脚本攻击的话,请使用text。 |
placement | string | function | 'top' | 如何定位提示冒泡:`top`、 `bottom`、`left`、`right`、`auto`。 如果用一个函数来决定placement,会调用提示冒泡的DOM节点作为第一个参数,然后触发元素的DOM节点是第二个参数。 |
selector | string | false | 如果提供了一个选择器,提示框将被委派给指定的目标。在实践中,它让动态添加的HTML内容也能附加提示框。看这里和一个翔实的例子。 |
template | string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
在创建提示冒泡时使用HTML。 提示冒泡的
最外层的包裹元素必须拥有 |
title | string | function | '' | 如果 如果提供了一个函数,调用这个函数时,函数的 |
trigger | string | 'hover focus' | 如何触发提示冒泡——`click`、`hover`、`focus`、`manual`。你可以传递多个触发器,用空格隔开它们。但是`manual`不能用别的触发器结合使用。 |
constraints | Array | 'hover focus' | 一个约束数组,传递给Tether。欲知更多请查询Tether的约束文档 |
offsets | string | '0 0' | 提示冒泡相对于目标的偏移,欲知更多请查询Tether的偏移文档。 |
方法
$().tooltip(options)
对一个元素集附加一个提示冒泡处理程序。
.tooltip(‘show’)
显示一个元素的提示冒泡。在提示冒泡真正显示之前返回给调用者(也就是,在shown.bs.tooltip
事件发生之前)。这被视为提示冒泡的一次“人为”触发。零长度标题的提示冒泡不会显示。
$('#element').tooltip('show')
.tooltip(‘hide’)
隐藏一个元素的提示冒泡。在提示冒泡真正隐藏之前返回给调用者(也就是,在hidden.bs.tooltip
事件发生之前)。这被视为提示冒泡的一次“人为”触发。
$('#element').tooltip('hide')
.tooltip(‘toggle’)
切换一个元素的提示冒泡。在提示冒泡真正显示或隐藏之前返回给调用者(也就是,在 shown.bs.tooltip
或hidden.bs.tooltip
事件发生之前)。这被视为提示冒泡的一次“人为”触发。
$('#element').tooltip('toggle')
.tooltip(‘destroy’)
隐藏并销毁一个元素的提示冒泡。使用委派的提示冒泡(创建时使用了selector
选项)不能在后代触发元素上被单独销毁。
$('#element').tooltip('destroy')
事件
事件类型 | 描述 |
---|---|
show.bs.tooltip | 当调用show 实例方法时,会立即触发该事件。 |
shown.bs.tooltip | 当提示冒泡对用户来说可见时(需要等待CSS过渡完成),会触发该事件。 |
hide.bs.tooltip | 当调用hide 实例方法时,会立即触发该事件。 |
hidden.bs.tooltip | 当提示冒泡对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})
吐血!!为什么不触发呢?
来源:oschina
链接:https://my.oschina.net/u/199513/blog/647401