Jquery实现自定义tooltip示例代码


Posted in Javascript onFebruary 12, 2014

Jquery实现自定义tooltip,具体代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication247.Default" %> <!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 runat="server"> 
<title></title> 
<style type="text/css"> 
#tooltip 
{ 
position:absolute; 
border:1px solid #333; 
background:#f7f5d1; 
padding:1px; 
color:#333; 
display:none; 
} 
</style> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(function () { 
var x = 10; //tooltip偏移鼠标的横坐标 
var y = 20; //tooptip偏移鼠标的纵坐标 
var myTitle; 
//1. 鼠标移至新闻,去掉系统默认的tooltip,自定义tooltip 
//2. 鼠标移出新闻,还原系统默认的tooltip,移除自定义的tooltip 
//3. 鼠标在新闻上移动,设置自定义的tooltip的位置 
$("a.tooltip").mouseover(function (e) { 
myTitle = this.title; 
this.title = ""; 
var tooltip = "<div id='tooltip' style='background:lightblue;'>" + myTitle + "</div>"; 
$("body").append(tooltip); 
$("#tooltip").css({ 
"top": (e.pageY + y) + "px", 
"left": (e.pageX + x) + "px" 
}).show("fast"); 
}).mouseout(function () { 
this.title = myTitle; 
$("#tooltip").remove(); 
}).mousemove(function (e) { 
$("#tooltip").css({ 
"top": (e.pageY + y) + "px", 
"left": (e.pageX + x) + "px" 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div class="scrollNews" > 
<ul> 
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li> 
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li> 
<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li> 
<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li> 
<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li> 
<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li> 
<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li> 
</ul> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
jQuery功能函数详解
Feb 01 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
jquery实现手机发送验证码的倒计时代码
Feb 12 #Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 #Javascript
利用jquery写的左右轮播图特效
Feb 12 #Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 #Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 #Javascript
Javascript写入txt和读取txt文件示例
Feb 12 #Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 #Javascript
You might like
PHP 高手之路(三)
2006/10/09 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python中统计函数运行耗时的方法
2015/05/05 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
文科生自我鉴定
2014/02/15 职场文书
秘书英文求职信
2014/04/16 职场文书
带病坚持工作事迹
2014/05/03 职场文书
公司节能减排方案
2014/05/16 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python