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 相关文章推荐
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
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阿拉伯数字转中文人民币大写
2015/12/21 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
React进阶学习之组件的解耦之道
2017/08/07 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python3 使用traceback定位异常实例
2020/03/09 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Python 如何对文件目录操作
2020/07/10 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
android面试问题与答案
2016/12/27 面试题
网络技术支持面试题
2013/04/22 面试题
自考自我鉴定范文
2013/10/30 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
岗位职责说明书
2014/05/07 职场文书
医学生求职自荐书
2014/06/12 职场文书
大学生年度个人总结
2015/02/15 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
七年级作文之环保作文
2019/10/17 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python