鸟食轩

 Microsoft .NET[C#] MVP 2003
随笔 - 429, 文章 - 235, 评论 - 5527, 引用 - 356
数据加载中……

从此不再为Web页面中的Tooltip烦恼

    让Web页面中，不能折行或不希望被折行的文字始终显示在一行，是一种严格的UI风格，毕竟自由的折行会使得表格和整体界面变得很难把握。当然在一行显示不完全时配以省略号在结尾，能很好的提示用户表示语句未结束，不过这时为了让用户能看到所有文字，Tooltip就是必不可少的了。

    显示Tooltip在Web上还不是轻而易举的事情，只要把html元素的title属性设上非空字符串，就自然是Tooltip了。不过这样其实还是挺麻烦的，由于预先写入title，会带来几个副作用：1、带来不必要的内容开销，因为预置title属性，会带来文档的增大；2、总是会显示Tooltip，即使在一行能显示完全的情况下，也显示Tooltip，这样就会让用户迷惑了，还以为再补充说明什么东西呢；3、遇到Tooltip需要显示的文字里有特殊字符，比如：单引号'双引号"时，还需要在服务器端对Tooltip内容编码。

    使用客服端脚本来处理Tooltip，就可以避免上面提到的所有不足和问题。示例如下：
this is a long long long long long long long long long string. this is a long long long long long long long long long string.
this is a long long long long long long long long long string. this is a long long long long long long long long long string. this is a long long long long long long long long long string.
this is a long long long long long long long long long string. this is a long long long long long long long long long string. this is a long long long long long long long long long string.
this is a long long long long long long long long long string. this is a long long long long long long long long long string. this is a long long long long long long long long long string. this is a long long long long long long long long long string.

    // 蓝色的文字是自己本身就带有Tooltip的，你可以调整页面的大小看看Tooltip的适应性。

    原理是在body元素上统一控制，把下面的代码手工加入页面底部，或者在ASP.NET中使用Page.RegisterStartupScript方法注册到页面上。
<script language="javascript">
var format = '{0}\r\n{1}';
    
document.body.onmouseover = function()
{
    var srcElmt = event.srcElement;
    if ( srcElmt && srcElmt.tagName )
    {
        if ( srcElmt.clientWidth < srcElmt.scrollWidth )
        {
            if ( !srcElmt.__title )
            {
                if ( srcElmt.title == srcElmt.innerText )
                {
                    return;
                }
                if ( srcElmt.title )
                {
                    srcElmt.__title = srcElmt.title;
                }
            }
            else
            {
                return;
            }
            if ( srcElmt.__title )
            {
                srcElmt.title = StringHelper.Format(format, srcElmt.__title, srcElmt.innerText);
            }
            else
            {
                srcElmt.title = srcElmt.innerText;
            }
        }
    }
};

document.body.onmouseout = function()
{
    var srcElmt = event.srcElement;
    if ( srcElmt && srcElmt.tagName )
    {
        if ( srcElmt.clientWidth >= srcElmt.scrollWidth )
        {
            if ( srcElmt.__title )
            {
                srcElmt.title = srcElmt.__title;
                srcElmt.__title = null;
            }
            else
            {
                if ( srcElmt.title == srcElmt.innerText )
                {
                    srcElmt.title = '';
                }
            }
        }
    }
};
</script>

    参数format用来控制当Tooltip重合的时候怎么显示，因为有的文字本身就有Tooltip，当它出现省略号的时候，就需要设计它怎么和自动的Tooltip一起显示。这样一来页面上只要使用css限制了单行的现实的文字，在出现省略号时就都自动的拥有了Tooltip，并且最重要的是，这时的Tooltip不会受任何特殊字符的影响哦。

    // StringHelper.Format 方法参看这里

posted on 2005-09-01 23:48 birdshome 阅读(6887) 评论(9)  编辑 收藏 网摘 所属分类: Jscript&Dhtml开发

评论

#1楼    回复  引用  查看    

不错，呵呵

又学一招
2005-09-02 08:26 | JustinLee      

#2楼    回复  引用    

太好了。

很有帮助。谢谢
2005-09-02 10:25 | ncw [未注册用户]

#3楼    回复  引用  查看    

俺先收藏起来
2005-09-02 11:03 | 徐灿钊Asp.net专栏      

#4楼    回复  引用    

谁知道firefox能不能弄出那种自动的"..."?!
2005-09-06 10:55 | cnnwai [未注册用户]

#5楼 [楼主]   回复  引用  查看    

在某些特定页面中，上面给出的代码可能有bug。修正版本如下：
var format = '{0}\r\n{1}';
document.body.onmouseover = function()
{
    var srcElmt = event.srcElement;
    if ( !srcElmt.tagName || !srcElmt.innerText || srcElmt.tagName == 'BODY')
    {
        return;
    }
    if ( srcElmt.offsetWidth < srcElmt.scrollWidth )
    {
        if ( !srcElmt.__title )
        {
            if ( srcElmt.title == srcElmt.innerText )
            {
                return;
            }
            if ( srcElmt.title )
            {
                srcElmt.__title = srcElmt.title;
            }
        }
        if ( srcElmt.__title )
        {
            srcElmt.title = StringHelper.Format(format, srcElmt.__title, srcElmt.innerText);
        }
        else
        {
            srcElmt.title = srcElmt.innerText;
        }
    }
    else
    {
        if ( srcElmt.__title )
        {
            srcElmt.title = srcElmt.__title;
            srcElmt.__title = null;
        }
        else
        {
            if ( srcElmt.title == srcElmt.innerText )
            {
                srcElmt.title = '';
            }
        }
    }
};    
     修正版只需要响应body的onmouseover一个事件就行了，其原因是onmouseover和onmouseout这两个看似配对的事件，并不能理想的配对被触发。由于窗口遮盖关系和鼠标移动速度等的影响，onmouseout事件的触发很不可靠，所以使用onmouseout清除或还原title的状态就是有很大缺陷的。同时修正版不使用onmouseout，也是少占用一个body对象的事件handler接口，而且可靠性大大加强，还可以对内容动态变化的字段进行正确的tooltip信息提示。
2005-09-07 13:59 | birdshome      

#6楼    回复  引用    

firefox中不能正常省略啊
2005-09-18 14:12 | zijie [未注册用户]

#7楼    回复  引用  查看    

我正要找这个东西呢 呵呵
厉害呀。。。
2006-01-10 13:10 | 虫子的一天      

#8楼    回复  引用    

可惜要TABLE-LAYOUT: fixed;，这样的话所有列宽都是一样的，很多时候并不希望这样
2007-06-22 17:14 | conch [未注册用户]

#9楼 [楼主]   回复  引用  查看    

@conch
和table其实没有关系，更谈不上一定要table-layout:fixed，只是这个示例用了table而已。
2007-06-22 19:47 | birdshome      

发表评论
姓名 [登录] [注册] 
主页
Email (仅博主可见) 
验证码 *  验证码看不清,换一张
内容(请不要发表任何与政治相关的内容)  
今天你闪了吗？

《C# 3.0设计模式》65折特惠
  登录  使用高级评论   新用户注册   返回页首      

导航: 网站首页 社区 新闻 博问 闪存 网摘 招聘 .NET频道 知识库 找找看 Google站内搜索



China-pub 计算机图书网上专卖店！6.5万品种 2-8折！
China-Pub 计算机绝版图书按需印刷服务

相关文章:

相关链接: