html标签title属性效果不友好，最致命的是响应慢，体验不好，JQuery-UI提供了很好的支持。在jquery.tip的基础上又做了修改，这样子定制效果更强。

代码如下：

<!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">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>jQuery实现的简单文字提示效果</title>

	<!--   无需引用jQuery，下面的js已经自带了简化的jquery代码 -->

	<script src="jquery.tip.js" type="text/javascript"></script>

	<style type="text/css">

		body {

			margin: 0;

			padding: 40px;

			background: #fff;

			font: 80% Arial, Helvetica, sans-serif;

			color: #555;

			line-height: 180%;

		}

		p {

			clear: both;

			margin: 0;

			padding: .5em 0;

		}

		/* tooltip */

		#tooltip {

			position: absolute;

			border: 1px solid #333;

			background: #f7f5d1;

			padding: 1px;

			color: #333;

			display: none;

		}

	</style>

	<script type="text/javascript">

		$(function () {

			var x = 10;

			var y = 20;

			$("a.tooltip").mouseover(function (e) {

				this.myTitle = this.title;

				this.title = "";

				var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>"; //创建 div 元素 文字提示

				$("body").append(tooltip);	//把它追加到文档中

				$("#tooltip").css({

					"top": (e.pageY + y) + "px",

					"left": (e.pageX + x) + "px"

				}).show("fast");	  //设置x坐标和y坐标，并且显示

			}).mouseout(function () {

				this.title = this.myTitle;

				$("#tooltip").remove();   //移除

			}).mousemove(function (e) {

				$("#tooltip").css({

					"top": (e.pageY + y) + "px",

					"left": (e.pageX + x) + "px"

				});

			});

		})

	</script>

</head>

<body>

	<h1 align="center">jQuery实现的简单文字提示效果</h1>

	<h2 align="center">请将鼠标指向超链接文字</h2>

	<p>

		<a href="" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提示1.">jQuery提示1</a>

	</p>

	<p>

		<a href="" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提提示2.">jQuery提示2</a>

	</p>

</body>

</html>

转载地址：http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html


html标签title属性效果优化的更多相关文章

  1. html a 链接标签title属性换行鼠标悬停提示内容的换行效果

    鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...

  2. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  3. html标签title属性值包括处理

    用js赋给title属性的html实体,<br/>无法解析,导致 也无法解析,应该使用\r\n代替,使用 无法实现换行,因为没有经过浏览器的再解析. str_info.replace(/\ ...

  4. HTML中input标签的alt属性和title属性的比较

    经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...

  5. 【HTML】input标签中alt属性和title属性的比较

    经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...

  6. img标签中alt和title属性的正确使用

    在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的使用这两个属性除了可以提高图片的搜索能力外,在 ...

  7. 同一容器中a标签比较多的情况下通过title属性值隐藏

    同一容器中a标签比较多的情况下如何通过title属性值控制a标签的隐藏或显示 最近项目中遇到一个IE兼容性问题,网站需要在底部footer添加"站长统计"代码,容器中动态添加很多a ...

  8. img标签中alt属性与title属性在seo的作用-摘自网友

    img标签中alt属性与title属性作用,也许大家比较迷惑,现在给大家举例说明.alt属性是图片的替换文字.title属性规定元素的额外信息,有视觉效果. 目录 alt属性 title属性 ie和f ...

  9. HTML语言中img标签的alt属性和title属性的作用与区别

    alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方,而title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,有点类似jQuery的h ...

随机推荐

  1. mysql 视图入门

  2. jmeter常见错误及解决方法

    jmeter常见错误:   错误一: Response code: Non HTTP response code: java.net.SocketTimeoutException Response m ...

  3. Linux基础之防火墙

    Linux基础之防火墙 Iptables   最初认识iptables还是在安卓手机上玩tiny的时候知道的,什么扫地僧.Jume等防跳脚本都基于iptables原理,一直觉得iptables的命令很 ...

  4. 小程序封装API

    一般我们https请求都是通过wx.request来请求,但是这种请求如果多了,页面会混乱不说,还不好管理,因此我将请求单独拎出去,方便管理,也方便后期维护. // api.js const API_ ...

  5. --转载 详细介绍java中的数据结构

    http://developer.51cto.com/art/201107/273003.htm 也许你已经熟练使用了java.util包里面的各种数据结构,但是我还是要说一说java版数据结构与算法 ...

  6. POJ2392：Space Elevator

    Space Elevator Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9244   Accepted: 4388 De ...

  7. MYSQL 免安装版修改root密码

    c:>mysql –uroot; mysql>show databases; mysql>use mysql;//不用修改 mysql>UPDATE user SET pass ...

  8. 洛谷 P2426 删数

    题目传送门 解题思路: 区间DP,f[i][j]表示区间i~j可获得的最大值,因为本题的所有区间是可以直接一次性把自己全删掉的,所以所有区间初始化为被一次性删除的值,然后枚举断点,跑区间DP. AC代 ...

  9. Python基础笔记：使用dict和set

    dict 就和 C语言中的 map 的作用一样.查找非常快,以空间换时间! dict的使用: >>> d={'Mike':66,'Bob':77,'John':88} #定义一个di ...

  10. tomcat以服务形式开机启动

    第一步 将tomcat配置为服务模式 cp $TOMCAT_HOME/bin/catalina.sh /etc/init.d/tomcat #将tocmt启动文件复制到/etc/init.d下 vim ...