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. Day6 - G - 立方体大作战tet HYSBZ - 1106

    一个叫做立方体大作战的游戏风靡整个Byteotia.这个游戏的规则是相当复杂的,所以我们只介绍他的简单规则:给定玩家一个有2n个元素的栈,元素一个叠一个地放置.这些元素拥有n个不同的编号,每个编号正好 ...

  2. 如何用hugo搭建个人博客

    如何用hugo搭建个人博客 1. 安装 Hugo 点击跳转 Hugo Releases win10 步骤: 下载解压 , 然后添加环境变量 测试: #命令行测试 hugo version 2. 创建站 ...

  3. 32位CPU和64位CPU 区别

    操作系统只是硬件和应用软件中间的一个平台. 32位操作系统针对的32位的CPU设计. 64位操作系统针对的64位的CPU设计.操作系统只是硬件和应用软件中间的一个平台. 32位操作系统针对的32位的C ...

  4. 小程序分享报错 Cannot read property 'apply' of null;at page XXX onShareAppMessage function

    Cannot read property 'apply' of null;at page XXX onShareAppMessage function 然后看了下自己的代码,分享按钮在子组件里, at ...

  5. Idea--使用Idea调试设置

    参考 https://blog.csdn.net/yyjava/article/details/81453748 关闭一些Idea默认设置,否则懵逼到爆炸.. 1.关闭集合类视图 2.关闭watch视 ...

  6. node - 获取 token

     String(req.headers.authorization || '').split(' ').pop() 

  7. node - 获取当前时间并格式化

    1,安装 moment模块 cnpm i moment --save 2,引入 var moment = require('moment'); 3,获取当前时间并格式化 var current_tim ...

  8. Maven的安装和创建项目的过程

    一.下载Maven包和配置环境变量 1.将下载好的maven包放到一个目录中:目录中不能有汉字和空格 2.配置环境变量 3.配置path路径 二.配置阿里云私服 1.找到setting目录,配置下载j ...

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

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

  10. RobotFramwork中实现oracle数据库的连接（终于解决cx_oracle问题）

    RobotFramework连接数据库有java实现,也有python实现的,现在研究的python实现的,java还没尝试.有兴趣的参考后面的转载文章.     步骤(也转载了别人的文章,因为写的比 ...