jQuery Tools tooltip使用说明

HTML


代码如下:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css"
href="./tooltip-generic.css"/>
<style>
#myform {
border:1px outset #ccc;
background:#fff repeat-x;
padding:20px;
margin:20px auto;
width:350px;
font-size:12px;
-moz-border-radius:4px;
}
#myform h3 {
text-align:center;
margin:0 0 10px 0;
}
/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs textarea, #inputs select {
display: block;
width: 150px;
float: left;
margin-bottom: 20px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
</style>
</head>
<body><form id="myform" action="#">
<h3>Registration Form</h3>
<div id="inputs">
<!-- username -->
<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/>
<br />
<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" title="Make it hard to guess." />
<br />
<!-- email -->
<label for="email">Email</label>
<input id="email" title="We won't send you any marketing material." />
<br />
<!-- message -->
<label for="body">Message</label>
<textarea id="body" title="What's on your mind?"></textarea>
<br />
<!-- message -->
<label for="where">Select one</label>
<select id="where" title="Select one of these options">
<option>-- first option --</option>
<option>-- second option --</option>
<option>-- third option --</option>
</select>
<br />
</div>
<!-- email -->
<label>
I accept the terms and conditions
<input type="checkbox" id="check" title="Required to proceed" />
</label>
<p>
<button type="button" title="This button won't do anything">
Proceed
</button>
</p>
</form>
<!-- javascript coding -->
<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {
// 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",
// custom opacity setting
opacity: 0.7
});
});
</script>
</body>
</html>

CSS


代码如下:

/* 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;
}

CSS可以不需要，这样显示的样子恶心了点。
关键代码：


代码如下:

// 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
});

使用
这里是可能存在的最简单的工具提示的初始化:

$("#myform :input").tooltip();配置























































属性 默认值 描述
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 '<div/>' 自从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类名生成的工具提示的元素。  
事件
确保你已经阅读 大约 事件 jQuery工具 。 所有事件监听器接收 这个 事件 对象 作为第一个参数。


















事件 触发事件
onbeforeshow 在工具提示显示。 第二个参数是工具提示 要使用位置。 这是一个对象的值{top: integer, left: integer} 
onShow 在工具提示显示。
onBeforeHide 在工具提示是隐藏的
onHide 当这个工具提示是隐藏的。
下面的示例是一个onShow 回调函数, 淡出触发器元素当工具提示显示:


代码如下:

$("label").tooltip({
// change trigger opacity slowly to 0.8
onShow: function() {
this.getTrigger().fadeTo("slow", 0.8);
}
});

事件管理
jQuery工具提示可以让你完全控制 当 工具提示 将显示或隐藏。 您可以指定不同的事件 不同类型的元素。 你可以控制这种行为 这个 事件 配置变量,它具有以下 默认值:


代码如下:

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
}

脚本 api
首先确保你已经了解你自己 与 jQuery工具 脚本 。

以下列出的是所有API方法:































方法 返回值 描述/例子
show() api 显示工具提示。
hide() api 隐藏工具提示。
isShown(fully) 布尔 返回 真正的 如果这个工具提示是可见的。 自从1.2.0 你也可以使用一个布尔型参数,保证了 函数返回 真正的 只有当这个工具提示是充分的 可见(在它的最终位置和不透明性)。
getTip() jQuery 返回tooltip作为一个jQuery对象。
getTrigger() jQuery 返回元素作为一个jQuery对象的触发。
getConf() 对象 返回工具提示配置。
内置的效果: fade
内置的效果“渐”有它自己的一组配置选项 如下:















属性 默认值 描述
fadeInSpeed 400 淡入时速度显示工具提示,以毫秒为单位。
fadeoutspeed 200 当工具提示的淡出速度是隐藏着的,以毫秒为单位。

下面有个自定义事件的例子：http://jquerytools.org/demos/tooltip/custom-effect.htm
　　tab：传送门
　　tab(幻灯片)：传送门
　　tooltip：传送门
　　overlay：传送门
　　dateinput：传送门
在携程做着framework2.0，研究的却是framework4.0，当时是怎么想的T.T。全是TMD老技术和堆代码

赞 (0)

相关推荐

  • Jquery实现自定义tooltip示例代码

    Jquery实现自定义tooltip,具体代码如下 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication247.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

  • jQuery带箭头提示框tooltips插件集锦

    jQuery带箭头提示框tooltips插件集锦

    摘要: 之前给大家介绍过用CSS来实现带箭头的提示框,今天我们来点不太一样的,本文将分享几款带箭头提示框. qtip qTip是一种先进的提示插件,基于jQuery框架.以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语音气泡提示,并且最重要的是免费.支持ie6+以及其他主流浏览器 grumble.js grumble.js提供了特殊的提示,北/东/南/西定位的一般限制.可以围绕一个给定的元素以任意角度旋转,任何距离可以被指定,任何CSS样式可以应用.自动尺寸调整为本地化的文本使

  • jQuery实现ToolTip元素定位显示功能示例

    jQuery实现ToolTip元素定位显示功能示例

    本文实例讲述了jQuery实现ToolTip元素定位显示功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • 25个优雅的jQuery Tooltip插件推荐

    25个优雅的jQuery Tooltip插件推荐

    下面我们为你推荐 25 个最好的工具提示插件: 1. jqTooltip jqTooltip 2. Pop! Simple Pop Menus with jQuery Pop! Simple Pop Menus with jQuery 3. jGrowl jGrowl 4. ProtoTip 2 ProtoTip 2 5. BetterTip BetterTip 6. Tipsy – Facebook-Style Tooltip Plugin for jQuery Tipsy – Faceboo

  • jQuery自制提示框tooltip改进版

    jQuery自制提示框tooltip改进版

    自带的title的提示效果的响应速度是非常缓慢的,使用jQuery自制提示tooltip! HTML: <p><a href="#" title="超链接提示1" class="tooltip">提示1</a></p> <p><a href="#" title="超链接提示2" class="tooltip">提示2

  • 基于jquery的自定义鼠标提示效果 jquery.toolTip

    基于jquery的自定义鼠标提示效果 jquery.toolTip

    IE下效果 Firefox或其它浏览器效果 代码 复制代码 代码如下: //版权 酷车中国 www.kuchechina.com //作者 逐月 zhuyue.cnblogs.com //演示 http://www.kuchechina.com/carstools/Default.aspx jQuery.fn.toolTip = function() { this.unbind().hover( function(e) { this.t = this.title; this.title = ''

  • qTip 基于JQuery的Tooltip插件[兼容性好]

    qTip 基于JQuery的Tooltip插件[兼容性好]

    主页:http://craigsworks.com/projects/qtip/ 下载:http://craigsworks.com/projects/qtip/download 示例:http://craigsworks.com/projects/qtip/ qTip是一个基于JQuery的Tooltip插件.它几乎支持所有的主流浏览器例如: Internet Explorer 6.0+ Firefox 2.0+ Opera 9.0+ Safari 3.0+ Google Chrome 1.0

  • jquery tools之tooltip

    如tabs的学习,首先给出操作的html目标代码: 复制代码 代码如下: <form id="myform"> <h3> Registration Form</h3> <!-- username --> <label for="username">Username</label> <input id="username" /> <div class=&quo

  • 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

    使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

  • jquery插件tooltipv顶部淡入淡出效果使用示例

    jquery插件tooltipv顶部淡入淡出效果使用示例

      内部使用 复制代码 代码如下: <head>    <title></title>    <link href="base.css" rel="stylesheet" type="text/css" />    <link href="jquery.tooltip.less" rel="stylesheet/less" type="text

  • jQuery插件Tooltipster实现漂亮的工具提示

    Tooltipster是一个轻量级的jQuery工具提示插件,可以快速的帮助你生成漂亮的工具提示. 1,加载jQuery和包括Tooltipster的插件文件 在您下载Tooltipster,移动tooltipster.css和jquery.tooltipster.min.js到根的CSS和JavaScript的目录.接下来,加载jQuery和包括您的标签里面Tooltipster的CSS和JavaScript文件: <head> ... <link rel="styleshe

随机推荐