您当前位置：首页 > web前端 > htmlcss > CSS&&Bootstrap：tooltips的简单应用

CSS&&Bootstrap：tooltips的简单应用

来源：程序员人生发布时间：2014-12-08 08:25:16 阅读次数：7313次

对普通的Element，首先在class里面添加1个atip类

并且添加对应的值

data-toggle不可变

data-placement可以设置为top | bottom | left | right | auto.

title不为空的情况会显示title

否则显示data-original-title

固然最基本的文件都要导入

然后写1个JS脚本就能够了

Trigger：How tooltip is triggered - click | hover | focus | manual.

其他属性参考对应API

Name	Type	Default	Description
animation	boolean	true	Apply a CSS fade transition to the tooltip
container	string \| false	false	Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.
delay	number \| object	0	Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: `delay: { "show": 500, "hide": 100 }`
html	boolean	false	Insert HTML into the tooltip. If false, jQuery's `text` method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement	string \| function	'top'	How to position the tooltip - top \| bottom \| left \| right \| auto. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The`this` context is set to the tooltip instance.
selector	string	false	If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. Seethisandan informative example.
template	string	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	Base HTML to use when creating the tooltip. The tooltip's`title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class.
title	string \| function	''	Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the tooltip is attached to.
trigger	string	'hover focus'	How tooltip is triggered - click \| hover \| focus \| manual. You may pass multiple triggers; separate them with a space.
viewport	string \| object	{ selector: 'body', padding: 0 }	Keeps the tooltip within the bounds of this element. Example: `viewport: '#viewport'` or `{ "selector": "#viewport", "padding": 0 }`

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 音频编码之opus

下一篇 poj1482（隐式图求最短路）

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点