从此不再为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 方法参看这里