使用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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP 基本语法格式
2009/12/15 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
JS实现self的resend
2010/07/22 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python读写文件操作示例程序
2013/12/02 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Django REST framework视图的用法
2019/01/16 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
业务员薪酬管理制度
2014/01/15 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
闭幕式主持词
2014/04/02 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
三峡人家导游词
2015/01/31 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书