文档章节

工作记录:jquery tooltip 提示

阳光黑马
 阳光黑马
发布于 2014/10/15 08:32
字数 308
阅读 31
收藏 1

这是效果图;

tooltip.css:

.ui-slider-tooltip{	/* CSS属性顺序按照 字母首字母 排列*/
	background:#fdf9e5; 
	border:1px solid #fd7d2c;
	color:#222222;
	display: block;
	text-align: left;
	padding: 5px 3px 5px 3px;
	position: absolute;
	z-index:99999; 
}
.ui-corner-all {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
}
.ui-tooltip-pointer-down {
	border-bottom-width: 0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid #fd7d2c;
	bottom:	-8px;
	display: block;
	height:0;
	left: 18%;
	margin-left: -7px;
	position: absolute; 
	width:0;
}

.ui-tooltip-pointer-down-inner {
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	left: -6px;
	top: -9px;
	position: absolute; 
}

.tip
{
    font-size:9pt;
}

tooltip.js:

;(function($){
    jQuery.fn.extend({
        showTip:function(settings)
        {
            $(this).each(function(){
                //初始化配置信息
                var options = jQuery.extend({
                    flagCss:"tip",
                    flagWidth:$(this).outerWidth(),
                    flagInfo:$(this).attr("title"),
                    isAnimate:false
                },
                settings);
                if(!options.flagInfo)
                {
                    return;
                }
                $(this).removeAttr("title");
                $(this).focus(function(){
                    //设置提示信息最小宽度为163
                    options.flagWidth = (parseInt(options.flagWidth) < 100) ? 163 : parseInt(options.flagWidth);
                    var oTip = $("<div class='ui-slider-tooltip  ui-corner-all'></div>");
                    var oPointer = $("<div class='ui-tooltip-pointer-down'><div class='ui-tooltip-pointer-down-inner'></div></div>");
                    var oTipInfo = $("<div>" + options.flagInfo + "</div>").attr("class",options.flagCss).css("width",options.flagWidth + "px");
                    //合并提示信息
                    var oToolTip = $(oTip).append(oTipInfo).append(oPointer);
                    //添加淡入效果
                    if(options.isAnimate)
                    {
                        $(oToolTip).fadeIn("slow");
                    }
                    $(this).after(oToolTip);
                    
                    //计算提示信息的top、left和width
                    var position = $(this).position();
                    var oTipTop = eval(position.top - $(oTip).outerHeight() - 8);
                    var oTipLeft = position.left;
                    $(oToolTip).css("top" , oTipTop + "px").css("left" , oTipLeft + "px");
                    
                   //$(this).blur(function(){
                        //$(oToolTip).remove();
                    //});
                    $(this).mouseout(function(){//鼠标离开时触发
                   	  $(oToolTip).remove();
                    });
                });
            });
            return this;
        }
    })
})(jQuery);

此外还需要jquery库的支持

© 著作权归作者所有

阳光黑马
粉丝 9
博文 21
码字总数 11705
作品 0
海淀
程序员
私信 提问
25 个很有用的 jQuery 工具提示插件 (Tooltip)

工具提示是当鼠标在某特定区域上停留时显示的一个矩形窗口.工具提示窗口包含一些编程者想要显示的文本.当单击或者远离指定区域的时候就会消失。本文像你推荐 25 个 jQuery 的工具提示插件: ...

红薯
2011/08/18
2.8K
9
推荐 25 个优雅的 jQuery Tooltip 插件

jQuery 工具提示可以让网站上一些小的帮助信息显示更加直观,提升用户的体验。下面我们为你推荐 25 个最好的工具提示插件: 1. jqTooltip jqTooltip 2. Pop! Simple Pop Menus with jQuery ...

红薯
2011/05/15
43.7K
10
20 个非常有用的jQuery 工具提示插件

本文介绍了20个非常有用的jquery 提示插件。工具提示条对于完善web网站的用户体验,至关重要。下面的各种样式的工具提示,相信会对你的web开发设计有帮助。 列表如下: 1) Beautiful Tooltip...

小卒过河
2011/09/03
10.5K
9
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
824
5
jQuery Tools 1.2.2 发布

jQuery Tools 是一个当前网站开发中最最常用的UI组件集合,包括:Tab、工具提示ToolTip、窗口滚动、Overlap、Expose和Flash嵌 入,jQuery Tools 只有 5.8k 大小(强烈推荐)。 下图是一个Tab...

lich
2010/05/25
2.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

Netty整合Protobuffer

现在我们都知道,rpc的三要素:IO模型,线程模型,然后就是数据交互模型,即我们说的序列化和反序列化,现在我们来看一下压缩比率最大的二进制序列化方式——Protobuffer,而且该方式是可以跨...

算法之名
9分钟前
7
0
如何用C++实现栈

栈的定义 栈(stack)又名堆栈,它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶,相对地,把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压...

BWH_Steven
28分钟前
3
0
编程作业20190210900169

1编写一个程序,提示用户输入名和姓,然后以“名,姓”的格式打印出来。 #include <stdio.h>#include <stdlib.h> int main(){ char firstName[20]; char lastName[20]; print......

1李嘉焘1
40分钟前
6
0
补码的优点及原理分析

只讨论整数 1.计算机内部为什么没有减法器? 减法运算本身其实就是加法,如x - y即x +(-y),所以只需要将负数成功表示出来并可以参加加法运算,那加法器就可同时实现“+”和“-”的运算。这...

清自以敬
55分钟前
73
0
Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部