通js实现自定义Tooltip样式(更新)

以前经常在别的网站上看到他们的工具提示不像普通的一样，是有样式的，有的还加上了图标，一直在想它是怎么实现的。
今天研究了一下，自已写了一个这样的功能，嘿嘿
现在功能实现显示连接的title内容与连接地址
如下图所示，只要加上我写好这段代码，就可以很快实现这样的效果了。



JS代码:

// ===================================================
// Tooltip V1.0
// 为超级连接加上样式的js
// Author:Huacn Lee
// Blog: Huacn.cnblogs.com
// ===================================================
var _BarIdName = "___tooltipbar";
//页面上调用的方法
function initToolTip()
{    
    initStyle();//注册CSS样式
    initTipbar();//创建tooltip显示区域
            
    var tagaArry = new Array();    
    var tag = null;        
    tagaArry = document.getElementsByTagName("a");
    
    for(var i=0;i<tagaArry.length;i++)
    {
        tag = tagaArry[i];    
        //alert(tag.href);        
        var oldTitle = tag.title;    
        tag.onmouseover = function()
        { 
            showTipbar(this);
        };
        
        tag.onmouseleave = function()
        {
            hideTipbar(this);    
        };
        
        tag.onmousemove = function()
        {            
            setTipLocation();
        }
    }        
    
}

//显示tooltip
function showTipbar(tag)
{    
    var tipbar = $(_BarIdName);
    //alert(oldTitle);
    tipbar.innerHTML = tag.title;
    tag.title = "";    
    tipbar.style.display = "";    
}

//隐藏tooltip
function hideTipbar(tag)
{
    var tipbar = $(_BarIdName);
    tipbar.style.display = "none";    
    tag.title = $(_BarIdName).innerHTML;
}

//初始化tooltip区域
function initTipbar()
{        
    var div = document.createElement("div");    
    div.className = "tooltip";
    div.id = _BarIdName;
    document.body.appendChild(div);
    div.style.display = "none";
    //alert(div.innerHTML);
}

//设置tipbar的位置
function setTipLocation(e)
{
    var intX=0,intY=0;    
    if(e==null)
    {        
        e=window.event;        
    }
    
    if(e.pageX || e.pageY)
    {
        intX=e.pageX; intY=e.pageY;
    }
    else if(e.clientX || e.clientY)
    {
        if(document.documentElement.scrollTop)
        {
            intX=e.clientX+document.documentElement.scrollLeft;
            intY=e.clientY+document.documentElement.scrollTop;
        }
        else
        {
            intX=e.clientX+document.body.scrollLeft;
            intY=e.clientY+document.body.scrollTop;
        }
    }
    $(_BarIdName).style.top = (intY+10)+"px";
    $(_BarIdName).style.left = (intX)+"px";
}

//注册css
function initStyle()
{        
    var linkstyle = document.createElement("link");
    linkstyle.setAttribute("href","styles/tooltip.css");
    linkstyle.setAttribute("rel","stylesheet");
    linkstyle.setAttribute("type","text/css");        
    linkstyle.setAttribute("media","screen");    
    document.getElementsByTagName("head")[0].appendChild(linkstyle);
}

function $(re)
{
    return document.getElementById(re);
}

HTML页面调用：
<script type="text/javascript" src="scripts/ToolTip.js"></script>
<script type="text/javascript">initToolTip();</script>

通过在页面的最后加入这样一段代码，就可以实现给所有的超级连接加上自定义工具提示了。
Tooltip源代码包下载地址：http://www.wathon.com/opensource/js/tooltip/ToolTip_src.rar
Tooltip效果演示地址：http://www.wathon.com/opensource/js/tooltip/example.html

刚刚修改了一下，现在在Firefox下没有问题了，样式也修改了一下，加上了图标，另外把连接的地址显示在上面了，还改了一下css，一面在使用的时候跟其它的css发生冲突（嘿嘿，把哪个class的名称改得很长，估计不会有哪位跟我想到一起了吧）。
posted on 2007-04-11 14:10 李华顺 阅读(3871) 评论(41)  编辑 收藏 网摘 所属分类: Javascript & Ajax

  回复  引用    
2007-04-11 14:21 | 暂时无法显示 [未注册用户]
呵呵,正找喃,谢谢.
  回复  引用  查看    
2007-04-11 14:37 | yunhuasheng      
very good!!
  回复  引用    
2007-04-11 14:39 | stoneZhu [未注册用户]
喜欢和你用一样的字体风格,看的爽:)，这样的效果也不错
  回复  引用  查看    
2007-04-11 14:47 | Huacn Lee      
@stoneZhu
博客的吗，还是这个代码里面的

  回复  引用    
2007-04-11 15:28 | lswweb [未注册用户]
............好像上传错代码了吧...怎么是一个浮动窗口
  回复  引用  查看    
2007-04-11 15:29 | 菌哥      
不错,支持一下
  回复  引用    
2007-04-11 15:33 | Bluesky[匿名] [未注册用户]
你的下载代码和文章不是一回事
  回复  引用  查看    
2007-04-11 15:40 | endision      
传错了呀。。。。。。。。。。。。
  回复  引用    
2007-04-11 15:40 | lswweb [未注册用户]
同志们,我发现了正确的代码下载地址
http://www.cnblogs.com/Files/huacn/tooltip.rar
  回复  引用  查看    
2007-04-11 15:47 | Huacn Lee      
哦，弄错了，呵呵
现在改过来了
  回复  引用  查看    
2007-04-11 16:09 | WOW玩家      
ff兼容吗？
  回复  引用    
2007-04-11 16:28 | stoneZhu [未注册用户]
@Huacn Lee
我说的是代码
  回复  引用    
2007-04-11 17:22 | 哈哈[匿名] [未注册用户]
在FF下不行么
  回复  引用  查看    
2007-04-11 17:44 | 浪子      
以前学习js的时候也写过一个:-)

  回复  引用  查看    
2007-04-11 18:01 | ^-^Roping.Zong      
写过！
建设银行的输入提示更人性化些！
  回复  引用  查看    
2007-04-11 18:30 | 极地银狐.NET      
楼主用的新皮肤?
  回复  引用  查看    
2007-04-11 18:42 | Huacn Lee      
@哈哈[匿名]
现在Firefox下面没有问题了，呵呵
  回复  引用  查看    
2007-04-11 18:43 | Huacn Lee      
@极地银狐.NET
你是说我的博客吗？看一下前面的文章，有代码下载的
  回复  引用  查看    
2007-04-11 22:15 | 布尔      
除了加到a元素还能加到别的元素吗？考虑这一点应该修改一下调用接口
tag.onmousemove = function()
{
setTipLocation();
}
与
tag.onmousemove = setTipLocation是一样为什么不用后面的写法？
  回复  引用  查看    
2007-04-11 22:20 | U2U      
挺漂亮的
  回复  引用  查看    
2007-04-11 23:38 | Huacn Lee      
@布尔
两个写法有区别吗?不明白
  回复  引用  查看    
2007-04-12 10:23 | 凯恩      
加到别的元素很简单
  回复  引用  查看    
2007-04-12 10:24 | 凯恩      
不小心按了下回车，加到别的元素，你只要修改js文件里面对a元素的判断，加入自己的判断就可以了
  回复  引用  查看    
2007-04-12 10:35 | Huacn Lee      
恩，不过还是要处理不同的属性的，比如 img 的提示文字是 alt
  回复  引用    
2007-04-12 11:39 | 冰点火焰 [未注册用户]
提些建议：
1、要能够在多种控件中上使用,而不只是href
2、要能够根据距离窗口的位置调整Tips的显示
3、要能够在跟在最上层显示，建议使用iframe
  回复  引用  查看    
2007-04-12 12:19 | Edwin Liu      
有个很大的问题,如果提示中有链接,是无法点击的
  回复  引用  查看    
2007-04-12 12:21 | Huacn Lee      
@Edwin Liu
提示中的连接干嘛要拿来点呀，显示出来只是为了方便查看，本来指到哪个地方就是可以点击的呀
  回复  引用  查看    
2007-04-12 12:22 | Huacn Lee      
@冰点火焰
你这一提我倒是想起了一点东西，忘了设置tooltip的z-index了，呵呵
  回复  引用    
2007-05-11 10:59 | emin [未注册用户]
发现一个问题，在带用户控件的.aspx页中，如果引用<script type="text/javascript">initToolTip();</script>在<body>内，就会报错。
  回复  引用  查看    
2007-05-11 11:21 | Huacn Lee      
@emin
什么错？
<script type="text/javascript">initToolTip();</script>
这个东西最好是放在最后，这样才会避免问题
如果放在前面可能会出现HTML还没加载完就去用JS，所以没有办法找到对象而出错
  回复  引用  查看    
2007-05-11 13:32 | 邱韵      
还是有缺陷啊
呵呵。。。
不能显示到<select></select>标签的上面
  回复  引用    
2007-09-27 18:50 | dddd [未注册用户]
以前发现过的，这两天找了两天才找到你啊，真的不容易啊，不容易啊
  回复  引用    
2007-10-14 14:19 | MY js [未注册用户]
不行啊
被瑞星卡卡拦掉了

  回复  引用    
2007-11-07 01:53 | xxxxxxxxx [未注册用户]
判断下好点
可能
ex.
if (tag.getAttribute("href") && tag.getAttribute("rel") == "tooltip")
  回复  引用    
2007-11-25 15:36 | FAMP [未注册用户]
请问楼主，使用这个tooltip需要保留版权信息吗？
  回复  引用  查看    
2007-11-25 16:41 | 李华顺      
@FAMP
Yes
  回复  引用    
2007-11-25 18:40 | FAMP [未注册用户]
不好意思，刚才忘了问您——我是否可以修改代码（JS & CSS），以适合我自己的页面风格，但保留相关的版权声明？
  回复  引用  查看    
2007-11-26 08:47 | 李华顺      
@FAMP
也是可以的，代码都可以修改
  回复  引用    
2008-01-25 09:19 | smith loo [未注册用户]
下载不了。:(
  回复  引用    
2008-03-19 11:11 | lianbing [未注册用户]
要是tip中的内容可以添加图片、链接，并且可以滑进去点击链接，就完美了，呵呵..人是贪婪的。anyway，a goodjob！
  回复  引用  查看    
2008-09-11 21:36 | 张波sun      
正需要

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-05-23 23:41 编辑过
Google站内搜索

China-pub 计算机图书网上专卖店！6.5万品种 2-8折！
近千种 9-95 新二手计算图书火热销售中！
开发者征途系统新作：《设计模式——基于C#的工程化实现及扩展》



相关文章:

相关链接:

最新IT新闻:
雅虎新任CEO两大人选基本锁定
成龙谈创办汽车网站：不让我的受骗经历重演
微软高管解密Windows7内幕：大量功能中国造
Vista SP2 beta 具体更新的清单
纽约时报：Twitter为何拒绝Facebook收购