使用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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
js jquery做的图片连续滚动代码
Jan 06 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 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 将excel导入mysql
2009/11/09 PHP
php加密解密实用类分享
2014/01/07 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python 中的with关键字使用详解
2016/09/11 Python
Python 内置函数complex详解
2016/10/23 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
实习老师个人总结的自我评价
2013/09/28 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
学校捐款活动总结
2015/05/09 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL