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. Day8 - A - Points on Line CodeForces - 251A

    Little Petya likes points a lot. Recently his mom has presented him n points lying on the line OX. N ...

  2. imagenet下载及训练

    imagenet 种子 迅雷打开验证集http://academictorrents.com/download/5d6d0df7ed81efd49ca99ea4737e0ae5e3a5f2e5.tor ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-pencil

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. P 1035 插入与归并

    转跳点 :

  5. HihoCoder第十四周：无间道之并查集

    #1066 : 无间道之并查集 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 这天天气晴朗.阳光明媚.鸟语花香,空气中弥漫着春天的气息--额,说远了,总之,小Hi和小H ...

  6. 使用Nginx搭建Tomcat9集群，Redis实现Session共享

    使用Nginx搭建Tomcat9集群,Redis实现Session共享 1.tomcat准备 首先准备两个tomcat9 ,修改配置文件server.xml 如果在多个服务器上分别启动tomcat 则 ...

  7. php观察者模式。

    第一次写博客,大家多多关照!欢迎拍砖哦! 我也刚学设计模式,所以记录下来. <?php class person{ public $name; public $birthday; public ...

  8. 第三节MapStruct翻译--Defining a mapper

    第三节MapStruct--Defining a mapper 在这一章节你将学到如何用mapstruct和它的一些必要的操作选项来定义一个bean mapper. 3.1 Basic mapping ...

  9. 本地Redis服务配置

    本地Redis服务配置 要求:在虚拟机中启动redis服务,并要在windows物理机上取得链接 虚拟机安装略,(结果如下) windows工作机上装了Oracle VM VirtualBox,并在其 ...

  10. MESI缓存一致性协议

    整理一下一些计算机的基础概念. 概念 MESI(Modified, Exclusive, Shared, Invalid) 也称 Illinois 协议, 由美帝UIUC(University of ...