分享个点击的tooltips

水平有限，自己琢磨了很久，加上别人的源码，最终效果还行，分享给需要的人，感谢帮助的人，顺便求改进，因为这东西貌似用的很多
<!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>tooltips</title>
<style type="text/css">
 body{ background-color:#CCE8CF}
.wrap{  position:relative; margin:20px auto; float:left; margin-right:400px;}
.sel{ width:100px; height:20px;   text-align:center; display:block; text-decoration:none}
.sel_con{ width:300px; height:100px; border:1px solid #666; background-color:#FF0; position:absolute; left:0; top:23px; display:none; z-index:2;}
.sel_con2{ z-index:3;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
            $(document).click(function(e){
var s=(e.target.className).toString();
if(s.substr(0,7)!='tipsCon'){    //如果当前点击的不是tooltip，则hide
$('.tipsCon').hide();
}
            });

            $(".tooltipBtn").click(function(e){
   $('.tipsCon').hide(); //关闭已打开的tooltip
   $(e.target).parent().find('div').show();
               return false;//防止冒泡
            });

        });
</script>
</head>
<body><div class="wrap">
<a class="tooltipBtn sel" href="#">点击这里&gt;</a>
<div class="tipsCon sel_con" >
<a href="http://www.yahoo.com.cn" target="_blank">i want to go to yahoo</a>
</div>
</div><div class="wrap">
<a class="tooltipBtn sel" href="#">点击这里&gt;</a>
<div class="tipsCon sel_con sel_con2">
<a href="http://www.yahoo.com.cn" target="_blank">i want to go to yahoo</a>
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    支持一下~~
    同时，LZ的if(s.substr(0,7)!='tipsCon'){    //如果当前点击的不是tooltip，则hide
                        $('.tipsCon').hide();
                    }   $(".tooltipBtn").click(function(e){
                   $('.tipsCon').hide(); //关闭已打开的tooltip
                   $(e.target).parent().find('div').show();
                   return false;//防止冒泡
                });
    这些里面的'tipsCon'等class name 都是写死了的，如果换成动态的获取就更好了。
      

  2.   

    3Q!
    这样做是想：需要这个效果的时候 只用加上对应的className 比较方便 而且一个DIV可以加很多个class 不影响写CSS  只要是看自己怎么用了，动态获取也是一个道理if(s.substr(0,7)!='tipsCon') 这个判断有点纠结 ，但不知道怎么改...
      

  3.   

    太丑了,我把我写的分享给大家吧,不过不是jquery的
    //用法：<a href="###" onfocus="popMsg(this,'提示内容！');">Link</a>
    需要用到背景图片,可惜csdn无法上传.如果有需要再加我QQ9256114发给你们吧.
    或者你们嫌麻烦也可以自己用photoshop做一个冒泡背景也可以,例如新浪微博,网易信箱等的冒泡样式都还不错.document.write("<style type='text/css'>"+
    "#popMsg {position:absolute;line-height:normal;font-size:12px;filter:Alpha(opacity=90);-moz-opacity:.9;opacity:0.9;}"+
    "#popMsg .popLeft,#popMsg .popRight,#popMsg .popAngle span,#popMsgText,#popMsg .popIcon{background-image:url(img/popmsg.gif)}"+
    "#popMsg .popHeader {height:1%;overflow:hidden !important;overflow /**/:visible}"+
    "#popMsg .popLeft {margin-left:3px;float:left;width:7px;height:25px;background-position:0 0;background-repeat:no-repeat}"+
    "#popMsg .popRight {float:left;width:15px;height:25px;background-position:0px -27px;background-repeat:no-repeat}"+
    "#popMsg .popAngle {clear:both;position:relative;height:10px}"+
    "#popMsg .popAngle span{position:absolute;top:-3px;left:10px;width:14px;height:13px;background-position:0 -80px;background-repeat:no-repeat}"+
    "#popMsg #popMsgText {float:left;color:#333;height:20px !important;height:26px;padding:5px 0 0 0;white-space:nowrap;background-position:0 -54px;background-repeat:repeat-x;overflow:hidden}"+
    "#popMsg #popMsgText .popIcon {float:left;width:15px;height:10px;margin:1px 3px 0 0}</style>");var P=function(Evt){return(typeof(Evt)=='object'?Evt:document.getElementById(Evt));},
    // 生成元素到refNode
    AddUnt=function(tagName,Attribute,strHtml,refNode){
    var cEle=document.createElement(tagName);
    for(var i in Attribute){cEle.setAttribute(i,Attribute[i]);}
    cEle.innerHTML=strHtml;refNode.appendChild(cEle);
    return cEle;
    },
    // 获取元素坐标
    GetCoord=function(node){
    var x=node.offsetLeft,y=node.offsetTop,parent=node.offsetParent;
    while(parent !=null){x+=parent.offsetLeft;y+=parent.offsetTop;parent=parent.offsetParent;}
    return{x:x,y:y};
    },
    _evtLst=[],
    FindEvt=function(node,event,handler){
    var i;for(i in _evtLst){if(_evtLst[i].node==node && _evtLst[i].event==event && _evtLst[i].handler==handler){return i;}}
    return null;
    },
    AddEvt=function(node,event,handler){
    if(FindEvt(node,event,handler)!=null){return;}
    if(!node.addEventListener){node.attachEvent('on'+event,handler);}else{node.addEventListener(event,handler,false);}
    _evtLst.push({node:node,event:event,handler:handler});
    },
    DelEvt=function(index){
    var eLst=_evtLst[index];delete _evtLst[index];
    if(!eLst.node.removeEventListener){eLst.node.detachEvent('on'+eLst.event,eLst.handler);}else{eLst.node.removeEventListener(eLst.event,eLst.handler,false);}
    },
    _DelEvt=function(node,event,handler){
    var index=FindEvt(node,event,handler);
    if(index==null){return;}DelEvt(index);
    },
    CleanEvt=function(){
    var i;for(i=_evtLst.length;i>0;i--){if(_evtLst[i]!=undefined){DelEvt(i);}}
    };function popMsg(obj,msg){
    var _obj=P(obj),_objMsg=P("popMsg"),_msg=msg;
    if(_obj==undefined || _msg==undefined || _msg==""){return;}
    // obj如果不可见。设置弹出对象为obj父元素
    if(_obj.style.display=='none' || _obj.style.visibility=='hidden' || _obj.getAttribute('type')=='hidden') _obj=_obj.parentNode;
    var _place=GetCoord(_obj),_marTop=null,_objText=P("popMsgText"),
    // 初始化
    init=function(){
    var _Msg=_obj.getAttribute("Msg");
    if(_Msg=="false"){return;}
    var _Html="<div id=\"popHeader\"><div class=\"popLeft\"></div><div id=\"popMsgText\"></div><div class=\"popRight\"></div></div><div class=\"popAngle\"><span></span></div>"
    if(_objMsg==null){_objMsg=AddUnt("div",{"id":"popMsg"},_Html,document.body);_objMsg.style.display="none";_objText=P("popMsgText");}
    show();
    },
    // 显示
    show=function(){
    _objMsg.style.display="";
    _marTop=_objMsg.offsetHeight;
    _objText.innerHTML=_msg;
    _objMsg.style.left=_place.x+"px";
    _objMsg.style.top=(_place.y-_marTop+8)+"px";
    // 关闭触发事件
    ID=setTimeout(hidebytime,1500);//setInterval
    //AddEvt(_obj,'blur',hide);//AddEvt(document,'mousedown',hide);
    },
    // 延時关闭
    hidebytime=function(){
    _objMsg.style.display="none";
    _objText.innerHTML="";
    clearTimeout(ID);
    // 移除关闭触发事件
    _DelEvt(_obj,'blur',hide);
    _DelEvt(document,'mousedown',hide);
    },
    // 手動关闭
    hide=function(){
    _objMsg.style.display="none";
    _objText.innerHTML="";
    // 移除关闭触发事件
    _DelEvt(_obj,'blur',hide);
    _DelEvt(document,'mousedown',hide);
    };
    init();
    }