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


Posted in Javascript onJune 24, 2013

使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律。点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/
以下是完整代码:保存到html文件打开也可以看效果。

<!doctype html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>使用jQuery UI修饰title属性的气泡悬浮框(Tooltip) - 柯乐义</title> 
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> 
<link rel="stylesheet" href="http://www.keleyi.com/keleyi/pmedia/jquery/ui/1.10.2/themes/sunny/jquery-ui.min.css" /> 
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery/ui/jquery-ui-1.10.2.custom.min.js"></script> 
<script type="text/javascript"> 
$(function () { 
$(document).tooltip(); 
}); 
</script> 
<style type="text/css"> 
label { 
display: inline-block; 
} 
</style> 
</head> 
<body> 
<h2>不一样的悬浮提示框</h2> 
<p>如果为一个元素添加了title属性,那么当光标移到该元素上时,会在元素旁显示出一个悬浮提示框。</p> 
<p>一般悬浮提示框是无法使用样式修饰的,但如果使用<a href="http://www.keleyi.com/menu/jquery/" title="jQuery特效、资料等学习内容。" target="_blank">jQuery</a> UI,则可以显示不同效果了,方法很加单:$(document).tooltip(); </p><p>把光标移到输入框(或超链接)上看看悬浮提示框的效果吧。</p> 
<p><label for="age">Email:</label><input id="age" title="可作为取回密码的手段,建议填写。" /></p> 
<p><a href="http://www.keleyi.com" target="_blank" title="柯乐义首页">柯乐义</a> 现在是样式一 <a href="http://www.keleyi.com/keleyi/phtml/tooltip/tooltip2.htm" title="样式二:redmond">样式二</a> <a href="http://www.keleyi.com/a/bjac/a6d651710217f7a0.htm" target="_blank" title="查看原文">原文</a></p> 
</body> 
</html>
Javascript 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
React根据宽度自适应高度的示例代码
Oct 11 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
Seajs源码详解分析
Apr 02 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 #Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 #Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 #Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 #Javascript
jquery可见性过滤选择器使用示例
Jun 24 #Javascript
jquery子元素过滤选择器使用示例
Jun 24 #Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 #Javascript
You might like
php学习笔记之 函数声明(二)
2011/06/09 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
jquery 上下滚动广告
2009/06/17 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
夜大自我鉴定
2013/10/31 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
简短清晨问候语
2015/11/10 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python
Python使用DFA算法过滤内容敏感词
2022/04/22 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang