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. Excel中列宽、行高与像素的换算公式

    DPI             Scale      ColumnWidth             RowHeight 72dpi           75%       cw=(pix-5)/6  ...

  2. parameterType和resultType

    在MyBatis中,我们通过parameterType完成输入映射(指将值映射到sql语句的占位符中,值的类型与dao层响应方法的参数类型一致),通过resultType完成输出映射(从数据库中输出, ...

  3. 针对Quartus IP Core的MIF文件格式小记

    Quartus里面的ROM IP核进行内容分配,需要在Wizard里面指定.mif文件. 本文有关细节和详细说明,请参照Quartus Prime 帮助文档v15.1 一个常见的mif文件如下所示: ...

  4. 吴裕雄--天生自然java开发常用类库学习笔记：Map接口使用的注意事项

    import java.util.HashMap ; import java.util.Map ; import java.util.Set ; import java.util.Iterator ; ...

  5. POJ 1151：Atlantis 线段树+扫描线

    Atlantis Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19374   Accepted: 7358 Descrip ...

  6. Asp.net mvc项目分页功能

    1.定义一个分页用的Page<T>类 /* 使用示例: var pager = new Pager<Article>( this.ControllerContext, //上下 ...

  7. 操作数据库的SqlHelper类

    public static class SqlHelper { public static readonly string connstr = ConfigurationManager.Connect ...

  8. 开源DDD设计模式框架YMNNetCoreFrameWork第五篇-Swagger增加权限认证

    配置文件services.AddSwaggerGen(c => { c.SwaggerDoc("v1", new OpenApiInfo { Version = " ...

  9. 使用docker快速体验kali linux

    环境 运行在 64位 机器 企业版的 win10 系统 下载镜像 首先搜索docker download 去官网下载docker:https://www.docker.com/products/doc ...

  10. 日期月份是英文转成数字——oracle

    update table01 set F_DATE = to_char(to_date(F_DATE, 'dd-month-yy', 'NLS_DATE_LANGUAGE=AMERICAN'), 'y ...