html代码如下:
<!doctype html>. 代码如下:
/* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
. 代码如下:
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadein/fadeout effect
effect: "fade",
tipclass:'tooltip', // 省却值:tooltip,少了这一行效果也是一样
// custom opacity setting
opacity: 0.7
});
属性 | 默认值 | 描述 |
---|---|---|
canceldefault | true |
自从1.1.0版。 当工具提示内容抓取 从 标题 触发器元素的属性 这个属性取消默认工具提示执行的行为 。 这是通过简单的移除 这个 标题 属性从触发器。
你仍然可以检索/修改标题值通过调用 jquery的 数据('title') 方法为触发。 |
effect | 'toggle' |
指定了如何显示和隐藏的提示。 有两个 内置的效果,可以用作值:
toggle 。 一个简单的显示/隐藏效果。 这是 默认 fade 。 一个简单的淡入/淡出效果 还有一个 幻灯片效果 不 包括在该工具本身。 你可以 构建 你自己的。 |
delay | 30 |
指定工具提示依然可见多久后鼠标 叶子触发器。 这是必需的,如果tootip已 互动的内容和用户将需要时间去 tootip区域。 通过设置0工具提示也会消失 鼠标离开就从触发器元素。 |
events | object |
一个配置对象,它指定当工具提示会 显示和隐藏。 您可以指定不同的事件不同 类型的元素。 这里有默认值为这个 属性:
events: { def: "mouseover,mouseout", input: "focus,blur", widget: "focus mouseover,blur mouseout", tooltip: "mouseover,mouseout" } javascript 你可以更多关于这方面的内容这个 事件管理 一章。 |
layout | '<p/>' |
自从1.2.0 html布局为生成的工具提示。 可以很复杂的html布局如你所愿。 你可以,例如,添加一个嵌套的 跨度 元素作为箭的占位符。 |
offset | [0, 0] |
精细地调节工具提示指定位置这个 位置 属性。 看到这个 定位细节 更多的信息。 |
opacity | 1 |
透明的工具提示。 例如,0意味着不可见, 1意味着没有透明度(完全可见)和0.4意味着40% 工具提示显示的。 如果你的工具提示使用css背景图像,你可以设置透明度的形象,如果它已经保存在png24图形格式。 记住,互联网 ie 6不支持原生透明的png。 |
position | 'top center' |
指定位置的工具提示。 看到这个 定位细节 更多的信息。 旧的格式:['top', 'center'] 是废弃,在未来将会被移除。 |
predelay | 0 |
自从1.1.0版。 指定了延迟(在毫秒)工具提示显示之前。 默认情况下有没有延迟。 |
relative | false |
自从1.1.1。 默认情况下,工具提示位置现在决定相对于文档(通过使用这个 relative)的方法。 通过启用这个产权工具提示的位置是相对确定的父元素 |
tip | 一个jquery选择器为一个单一的工具提示的元素。 对于示例 # mytip 。 该选项仅有效如果你要手动定义一个工具提示多个触发器同时元素。 因为1.2.5 标题 属性仍然可以被用作工具提示内容。 | |
tipclass | 'tooltip' |
自从1.2.0。 css类名生成的工具提示的元素。 |
事件 | 触发事件 |
---|---|
onbeforeshow | 在工具提示显示。 第二个参数是工具提示 要使用位置。 这是一个对象的值{top: integer, left: integer} |
onshow | 在工具提示显示。 |
onbeforehide | 在工具提示是隐藏的 |
onhide | 当这个工具提示是隐藏的。 |
. 代码如下:
$("label").tooltip({
// change trigger opacity slowly to 0.8
onshow: function() {
this.gettrigger().fadeto("slow", 0.8);
}
});
. 代码如下:
events: {
def: "mouseenter,mouseleave", // default show/hide events for an element
input: "focus,blur", // for all input elements
widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button
tooltip: "mouseenter,mouseleave" // the tooltip element
}
方法 | 返回值 | 描述/例子 |
---|---|---|
show() | api |
显示工具提示。 |
hide() | api |
隐藏工具提示。 |
isshown(fully) | 布尔 |
返回 真正的 如果这个工具提示是可见的。 自从1.2.0 你也可以使用一个布尔型参数,保证了 函数返回 真正的 只有当这个工具提示是充分的 可见(在它的最终位置和不透明性)。 |
gettip() | jquery |
返回tooltip作为一个jquery对象。 |
gettrigger() | jquery |
返回元素作为一个jquery对象的触发。 |
getconf() | 对象 |
返回工具提示配置。 |
属性 | 默认值 | 描述 |
---|---|---|
fadeinspeed | 400 | 淡入时速度显示工具提示,以毫秒为单位。 |
fadeoutspeed | 200 | 当工具提示的淡出速度是隐藏着的,以毫秒为单位。 |
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论