使用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的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
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实现读取和编写XML DOM代码
2010/04/07 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP7 新增常量
2021/03/09 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
浅谈python写入大量文件的问题
2018/11/09 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Tostadora意大利:定制T恤
2019/04/08 全球购物
C++的几个面试题附答案
2016/08/03 面试题
领导接待方案
2014/03/13 职场文书
医院义诊活动总结
2014/07/04 职场文书
观看信仰心得体会
2014/09/04 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
务工证明怎么写
2015/06/18 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书