让Web页面中，不能折行或不希望被折行的文字始终显示在一行，是一种严格的UI风格，毕竟自由的折行会使得表格和整体界面变得很难把握。当然在一行显示不完全时配以省略号在结尾，能很好的提示用户表示语句未结束，不过这时为了让用户能看到所有文字，Tooltip就是必不可少的了。
显示Tooltip在Web上还不是轻而易举的事情，只要把html元素的title属性设上非空字符串，就自然是Tooltip了。不过这样其实还是挺麻烦的，由于预先写入title，会带来几个副作用：1、带来不必要的内容开销，因为预置title属性，会带来文档的增大；2、总是会显示Tooltip，即使在一行能显示完全的情况下，也显示Tooltip，这样就会让用户迷惑了，还以为再补充说明什么东西呢；3、遇到Tooltip需要显示的文字里有特殊字符，比如：单引号'双引号"时，还需要在服务器端对Tooltip内容编码。
使用客服端脚本来处理Tooltip，就可以避免上面提到的所有不足和问题。示例如下：
// 蓝色的文字是自己本身就带有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
>
显示Tooltip在Web上还不是轻而易举的事情，只要把html元素的title属性设上非空字符串，就自然是Tooltip了。不过这样其实还是挺麻烦的，由于预先写入title，会带来几个副作用：1、带来不必要的内容开销，因为预置title属性，会带来文档的增大；2、总是会显示Tooltip，即使在一行能显示完全的情况下，也显示Tooltip，这样就会让用户迷惑了，还以为再补充说明什么东西呢；3、遇到Tooltip需要显示的文字里有特殊字符，比如：单引号'双引号"时，还需要在服务器端对Tooltip内容编码。
使用客服端脚本来处理Tooltip，就可以避免上面提到的所有不足和问题。示例如下：
// 蓝色的文字是自己本身就带有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不会受任何特殊字符的影响哦
。
本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。
