如何制作jQuery简单纯文字提示条，先介绍提示条（tooltip）的意思是用户鼠标悬停经过事件发生提示title。它们已经呈现在大多数浏览器中，当你可以提供一个链接或图片的title属性，就是用户将鼠标悬停在该元素，浏览器通常会显示它作为一个提示条，通过文本存储使用数据命令，可以清除并替换链接标题。提示条不仅支持文字标题内容，还支持图片按钮空白框控件。那么我从国外作者的技术博客 http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/ 学到一点他的代码，然后设计成自己的样式。

逻辑论
1.抓取标题
我们首先从链接中抓取其标题，将变成文字作为提示条弹出。我们需要从链接中解除默认的标题，为了避免默认的标题提示和我们自定义的提示条发生冲突，所以通过文本存储使用数据命令，再清除并替换链接标题。
2.鼠标经过事件
建立新的段落元素，它们带有tooltip的class类，我们可以下一个方式设置提示条内容。增加子节到页面在appendTo(‘body’)后面写，并自定义fadeIn的动画属性。
3.鼠标离开事件
很简单的，恢复标题的属性，清除提示条。
4.鼠标经过事件
非常重要，当我们需要获得X轴与Y轴坐标才能定位正确的提示条，这样提示条会跟着鼠标的下面。

可以用自定义的tooltip代替标签的默认title值,自由巧妙地设计提示条的样式和动画。
​1.代码
<body>
<div class="container">
<h1>jQuery简单提示条<small>如何制作jQuery效果</small></h1>
<div class="container">
<h2>鼠标经过蓝色的文字</h2>
<p><a href="#" title="看见了灰色提示条吧？" class="masterTooltip">世界上有蓝色的蛋蛋</a></p>
 
<h2>鼠标经过灰色的全段落文章</h2>
  <p title="我和蛋蛋之间的故事很有趣吧。" class="masterTooltip">我和蛋蛋是去年七月末认识的，很有意思，我们是网友，蛋蛋在群聊里看见女人的名字，觉得这个名字太简单了，而且明确表明自己已经是女人了，好奇就加了我。我们聊的很好，有点难舍难分的感觉，蛋蛋说等到水到渠成，我就去见你。哈哈，我挺高兴的，反而有马上见见他的感觉。约他出来看看庐山真面目！没沉，是我没在更新。女人昨天喝多了！因为感触，看了很多关于爱情的帖子，觉得很对不起蛋蛋。因为不能给他幸福和一个小家。我爱他，很爱很爱。</p>
 
<h2 title="此为主标题！" class="masterTooltip">鼠标经过这个标题（有提示条）</h2>
<p title="此为副标题！" class="masterTooltip">我和蛋蛋之间的故事小标题</p>
   
   
<h2>鼠标经过搞笑的图片</h2>
<img src="http://dandan500.com/wp-content/uploads/2013/10/fa7a0b2442a7d9334695b2ebad4bd11372f001b6.jpg" class="masterTooltip" title="哇！看看小白蛋和他的伙伴们惊呆了" />
 
<h2>鼠标经过按钮</h2>
<button type="button" class="masterTooltip" title="点击[确认]按钮，当然只是死按钮，不会给你惊喜">确认</button>
 
<h2>鼠标经过填写框</h2>
  <input type="text" placeholder="你的名字" class="masterTooltip" title="请输入你喜欢的名字"/>
</div>
</body>
2.代码
body{
     background:#FF7B3A;
     font:bold 12px Arial, Helvetica, sans-serif;
     margin:0;
     padding:0;
     min-width:960px;
     color:#666; 
}
 
a { 
    text-decoration:none; 
    color:#4979C2;
}
 
h1 {
    font: 4em normal Arial, Helvetica,Microsoft JhengHei, sans-serif;
    padding: 0; margin: 0;
    text-align:center;
  color:#ccc;
}
 
h1 small{
    font: 14px normal  Arial, Helvetica,    Microsoft JhengHei, sans-serif;
    text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
    display: block;
}
 
h2 {
    font-weight:700;
    color:#fff;
    font-size:20px;
    font: normal  Arial, Helvetica,     Microsoft JhengHei, sans-serif;
}http://www.huiyi8.com/huanbao/​
 
h2, p {环保标志
    margin-bottom:-1px;
}
 
.container {width: 960px; margin: 0 auto; overflow: hidden; height:910px;}
 
img {
    border:6px solid #fff;
}
 
.tooltip {
    display:none;
    position:absolute;
    border:0px solid #333;
    background-color:#ccc;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #000 1px 5px 20px;
-moz-box-shadow: #000 1px 5px 20px;
box-shadow: #000 1px 5px 20px;
    padding:10px;
    color:#C94338;
    font-size:12px;
}
3. [代码]记得在顶部或者底部php引用jquery库     
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
4. 代码
$(document).ready(function() {
// 纯文字提示条
$('.masterTooltip').hover(function(){
// 鼠标悬浮经过事件
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// 鼠标悬浮离开事件
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //获得X轴坐标
var mousey = e.pageY + 10; //获得Y轴坐标
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
​

jQuery简单纯文字提示条的更多相关文章

  1. jQuery 闪动的文字提示

    原文地址:http://www.cnblogs.com/kiter/archive/2013/02/22/2922242.html 声明,本文转自网络. jQuery 闪动的文字提示,仿QQ头像闪烁闪 ...

  2. jquery.autocomplete 搜索文字提示

    function GetJobTitle(obj) { $(obj).autocomplete("GetJobTitle.ashx", { max: 12, //列表里的条目数 m ...

  3. jQuery实现的简单文字提示效果模拟title(转)

    来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...

  4. jQuery图片提示和文字提示

    图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  5. DOM操作在jQuery中的实用------文字提示和图片提示

    关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...

  6. jQuery渐隐渐出的文字提示

    <html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...

  7. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  8. jNotify：操作结果信息提示条

    我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...

  9. 用js实现文字提示层 ---总结

    文字提示层在项目中应该是比较常见的,我工作中项目中就用到了,原理是一样,只不过形式不一样,今天通过看视频学习,学会了,总结下: 首先,页面效果如下:  需求: 当鼠标移入到红色字体是,提示框会显示在下 ...

随机推荐

  1. NYOJ90-整数划分，经典递归思想~~

    整数划分 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 将正整数n表示成一系列正整数之和:n=n1+n2+-+nk,  其中n1≥n2≥-≥nk≥1,k≥1.  正整数 ...

  2. POJ3528移石头

    题目大意: 河道两旁直线上有两块石头不能移动,距离为L,但中间放置了N块石头并列出这N块石头到起点的距离,可以移走M块,那么移走石头后每次牛跨石头的最小距离如何达到最大值,输出这个最大值 让最小距离的 ...

  3. PHP文件属性相关函数

    <meta charset= "utf-8"><?php //获取文件属性的函数 function getFilePro($filename) { //检测文件是 ...

  4. 推荐10+必备的 WordPress 常用插件

    众多的WordPress插件,使得WordPress的功能得到了较大的扩展,但是也正是由于过多的插件,导致我们很难选择所需的插件.今天,倡萌就根据自己的经验,给WordPress新手推荐一些常用的插件 ...

  5. 洛谷—— P1462 通往奥格瑞玛的道路

    https://www.luogu.org/problem/show?pid=1462 题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主 ...

  6. [Bzoj3611][Heoi2014]大工程（虚树）

    3611: [Heoi2014]大工程 Time Limit: 60 Sec  Memory Limit: 512 MBSubmit: 2000  Solved: 837[Submit][Status ...

  7. Codeforces 920E（补图BFS）

    题意: n(n<=200000)个点的完全图删去了m(m<=200000)条边,求剩下图的连通分量. 分析: 将未访问过的点用一个链表串起来 仍旧进行BFS,每次BFS扩展一个点u的时候, ...

  8. ARM PPC 交叉编译环境搭建

    ARM: 1,下载cross-3.4.1.tar.bz2 2,在/usr/local目录下建立arm目录 3,将cross-3.4.1.tar.bz2拷贝到arm目录下 4,tar jxvf cros ...

  9. 【Nginx】I/O多路转接之select、poll、epoll

    当需要读两个以上的I/O的时候,如果使用阻塞式的I/O,那么可能长时间的阻塞在一个描述符上面,另外的描述符虽然有数据但是不能读出来,这样实时性不能满足要求,大概的解决方案有以下几种: 1.使用多进程或 ...

  10. SpringBoot初始教程之日志处理(二)

    SpringBoot初始教程之日志处理(二) 1.介绍 SpringBoot默认是采用logback进行日志处理.Logback是由log4j创始人设计的又一个开源日志组件.Logback是由log4 ...