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

代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 	<title>jQuery实现的简单文字提示效果</title>
  7. 	<!--   无需引用jQuery，下面的js已经自带了简化的jquery代码 -->
  8. 	<script src="jquery.tip.js" type="text/javascript"></script>
  9. 	<style type="text/css">
  10. 		body {
  11. 			margin: 0;
  12. 			padding: 40px;
  13. 			background: #fff;
  14. 			font: 80% Arial, Helvetica, sans-serif;
  15. 			color: #555;
  16. 			line-height: 180%;
  17. 		}
  18.  
  19. 		p {
  20. 			clear: both;
  21. 			margin: 0;
  22. 			padding: .5em 0;
  23. 		}
  24.  
  25. 		/* tooltip */
  26.  
  27. 		#tooltip {
  28. 			position: absolute;
  29. 			border: 1px solid #333;
  30. 			background: #f7f5d1;
  31. 			padding: 1px;
  32. 			color: #333;
  33. 			display: none;
  34. 		}
  35. 	</style>
  36. 	<script type="text/javascript">
  37. 		$(function () {
  38. 			var x = 10;
  39. 			var y = 20;
  40. 			$("a.tooltip").mouseover(function (e) {
  41. 				this.myTitle = this.title;
  42. 				this.title = "";
  43. 				var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>"; //创建 div 元素 文字提示
  44. 				$("body").append(tooltip);	//把它追加到文档中
  45. 				$("#tooltip").css({
  46. 					"top": (e.pageY + y) + "px",
  47. 					"left": (e.pageX + x) + "px"
  48. 				}).show("fast");	  //设置x坐标和y坐标，并且显示
  49. 			}).mouseout(function () {
  50. 				this.title = this.myTitle;
  51. 				$("#tooltip").remove();   //移除
  52. 			}).mousemove(function (e) {
  53. 				$("#tooltip").css({
  54. 					"top": (e.pageY + y) + "px",
  55. 					"left": (e.pageX + x) + "px"
  56. 				});
  57. 			});
  58. 		})
  59. 	</script>
  60. </head>
  61.  
  62. <body>
  63. 	<h1 align="center">jQuery实现的简单文字提示效果</h1>
  64. 	<h2 align="center">请将鼠标指向超链接文字</h2>
  65. 	<p>
  66. 		<a href="" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提示1.">jQuery提示1</a>
  67. 	</p>
  68. 	<p>
  69. 		<a href="" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提提示2.">jQuery提示2</a>
  70. 	</p>
  71. </body>
  72.  
  73. </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. 049、Java中使用switch判断，不加入break时的操作

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  2. BFPRT（中位数的中位数算法）

    BFPRT(中位数的中位数算法) 类似于快排,但是划分区间的策略不一样. 分组,组内排序: 取出每组的中位数组成一个数组,再取这个数组的中位数: 以取出的中位数作为partition的轴.

  3. python pandas数据分析基础入门2——（数据格式转换、排序、统计、数据透视表）

    //2019.07.18pyhton中pandas数据分析学习——第二部分2.1 数据格式转换1.查看与转换表格某一列的数据格式:(1)查看数据类型:某一列的数据格式:df["列属性名称&q ...

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

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

  5. Golang的基础数据类型-字符型

    Golang的基础数据类型-字符型 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.字符型概述 Go语言中的字符有两种,即uint8类型和rune类型. uint8类型: 我们也 ...

  6. C++Socket通信（客户端和服务器）

    win32控制台版 获取本机IP: cmd:       ipconfig/all 我写的是一个服务器和客户端点对点的信息传递(实现相互的可以适当更改代码): 服务器发送给客户端的是一个结构体数据 t ...

  7. 官网英文版学习——RabbitMQ学习笔记（九）总结

    RabbitMQ与spingboot相整合,主要步骤也很简单: 一.首先需要的是添加依赖 二.需要设置属性,属性主要是设置rabbitmq的地址端口,用户名密码回调等需要用到的一些常量,在整合过程中, ...

  8. js排序专场

    1,冒泡排序 function bubble(arr) { var len = arr.length - 1; for (let i = 0 ; i < len; i++) { var bool ...

  9. bzoj 1912: [Apio2010]patrol 巡逻

    呵呵呵呵呵呵,自己画图,大概半个小时,觉的连上边会成环(是不是该交仙人掌了??)然后求环不重合部分最大就好了, 结果写了一坨DP,最后写不下去了,再次扒了题解. 发现我真的是个sb. k==1,直接是 ...

  10. 004、mysql使用SHOW语句找出服务器上当前存在什么数据库

    SHOW DATABASES; 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦,谢谢.