ToolTip小技巧(转)

最新推荐文章于 2024-09-13 16:39:43 发布

weixin_30856965

最新推荐文章于 2024-09-13 16:39:43 发布

阅读量66

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/genson/archive/2006/11/16/562200.html

版权

http://www.cnblogs.com/birdshome/archive/2005/09/01/AutoToolTip.html

让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.