如何定制页面提示信息(tooltips)

一个页面上往往有很多链接、按钮,如果没有任何提示信息,会让人很迷茫。虽然IE也带提示功能,只要给title属性赋值,如下代码 <a href="#" title="this a test">自带的提示</a>这样的提示很单调,鼠标移上去的时候显示出来,当鼠标在上面移动的时候,提示信息不会跟随,对比下面自定义的提示信息,差别就很明显,所以自定义的提示信息是很有必要的。

把鼠标放到链接上看提示信息如何定制提示信息,说起来很简单,先画出提示信息层,然后定位到目标对象。下面把实现分三部来说明:

1)绘制信息层

有两种方式,一种是静态,把层的html代码写在文档中,另外一种是动态,运用javascript脚本动态的创建层。静态方式简单,不灵活,动态的灵活,但比较困难,需要熟悉脚本和Dom结构,下面的代码是动态方式创建提示层

function createDivTooltip()

{

var divTips = document.createElement('div');//create div element

divTips.id='tooltip';

divTips.style.display='none'//invisible

document.body.appendChild(divTips);

}

2)定位信息层

function locate(e)

{ e=e||window.event;

var divTips = document.getElementById('tooltip');

var mousePos=getMousePosition(e);//get the coordinate of the mouse

divTips.style.top=mousePos.top-12+"px";

divTips.style.left=mousePos.left-8+"px";

}

关于如何定位鼠标在文档中的位置请参考《获取鼠标的坐标》

时间: 2025-01-27 16:36:39

如何定制页面提示信息(tooltips)的相关文章

亚马逊允许企业用户在亚马逊网站上设置自己的定制页面

摘要: 为了迎接圣诞购物季的到来,亚马逊悄然推出了一款名为亚马逊主页(Amazon Pages)的服务,允许企业用户在亚马逊网站上设置自己的定制页面. 通过这项服务,各大企业可以在亚马逊中获 为了迎接圣诞购物季的到来,亚马逊悄然推出了一款名为"亚马逊主页"(Amazon Pages)的服务,允许企业用户在亚马逊网站上设置自己的定制页面. 通过这项服务,各大企业可以在亚马逊中获得一个以自己品牌命名的定制域名,形式为:www.amazon.com/[品牌名称].还可以使用动态设计和大幅图片

定制页面弹出窗口

弹出窗口|页面 常泡在网上的朋友对"弹出窗口"一定不会陌生,像新浪.163等网站,一进入首页立刻就会弹出一个窗口,里面通常是一些告示信息,或者FLASH广告等等.其实这样的效果很容易实现,大家随我一起动手吧!不加修饰的弹出窗口 将下面这段代码插入你的页面中,在页面加载时就会自动弹出一个窗口,并打开Google搜索引擎,是不是很简单啊! 将代码放置在〈!-XXX --〉中间是为了兼容较低版本浏览器的需要,在低版本的浏览器中标签内的内容将被视作注视. 打开的页面使用绝对路径(http://

网页制作应掌握技术:随心所欲定制页面"弹出窗口"

弹出窗口|网页|页面 常泡在网上的朋友对"弹出窗口"一定不会陌生,像新浪.163等网站,一进入首页立刻就会弹出一个窗口,里面通常是一些告示信息,或者FLASH广告等等.其实这样的效果很容易实现,大家随我一起动手吧! 不加修饰的弹出窗口 将下面这段代码插入你的页面中,在页面加载时就会自动弹出一个窗口,并打开Google搜索引擎,是不是很简单啊! 将代码放置在〈!-XXX --〉中间是为了兼容较低版本浏览器的需要,在低版本的浏览器中标签内的内容将被视作注视. 打开的页面使用绝对路径(htt

关于cas的页面定制问题

问题描述 通过开源的cas做了统一身份认证系统,现在要定制页面,想问问top页面怎么让标题显示中文 解决方案 解决方案二:直接写编码为UTF-8解决方案三:不行,出现乱码CentralͳһAuthenticationService,ͳһ这个是写的中文解决方案四:不行,出现乱码CentralͳһAuthenticationService,ͳһ这个是写的中文解决方案五:该回复于2011-05-10 13:00:23被版主删除

Thinkphp5结合layer弹窗定制操作结果页面

本文实例为大家分享了Thinkphp5结合layer弹窗定制页面的具体代码,供大家参考,具体内容如下 1 打开应用公共文件页面    appliction/common.php,编写以下代码 注意: 成功消息的绿色背景部分是iframe 框架写法,如果是普通页面.就吧parent去除,改为: self.location.href="'.$url.'" rel="external nofollow" rel="external nofollow"

精彩:Asp.net动态生成html页面

此功能适用于后台数据库功能不强的web站点,即大部分文本不是存放在数据库的记录中,而是放在html文件或者xml文件中,仅仅把索引放到数据库中,如文章标题.类别.查询关键字等.这样适合于后台没有诸如MS Sql Server这样的数据库支持的Web站点. 适用于新闻发布系统,比如sina.163等都是采用动态生成html页面的. 适用于需动态定制页面的程序.比如论坛.聊天室等.可以加载定制好的html页面,来加强美观. 思路 1. 利用如Dw-Mx这样的工具生成html格式的模板,在需要添加格式

Asp.net动态生成html页面

asp.net|动态|生成html|页面 此功能适用于后台数据库功能不强的web站点,即大部分文本不是存放在数据库的记录中,而是放在html文件或者xml文件中,仅仅把索引放到数据库中,如文章标题.类别.查询关键字等.这样适合于后台没有诸如MS Sql Server这样的数据库支持的Web站点. 适用于新闻发布系统,比如sina.163等都是采用动态生成html页面的. 适用于需动态定制页面的程序.比如论坛.聊天室等.可以加载定制好的html页面,来加强美观. 思路 1. 利用如Dw-Mx这样的

WSS3SDK之定制一个mobile列表视图页的步骤

本次演练中将向大家展示如何通过实现一个自定义RenderingTemplate控件来对mobile列表视图页进行定制.下面的例子展示了如何定制页面的内容部分. 正如先前在mobile页面渲染机制一节所描述的,一个Microsoft.SharePoint.MobileControls.SPMobileListContents 模板选取器控件会被调用,并通过一条链的调用,最终找到显示在页面中的控件. 基于当前列表类型,该对象决定了什么 RenderingTemplate 控件会渲染在mobile主页

360安全卫士个性版定制

首先点击http://my.360safe.com/进入定制页面,如下图所示: 定制页面 点击页面上的"创建个人版",等待片刻,进入如下图所示页面,把填写星号标记的项目填写上自己的个人信息,同时点击"上传照片"从本地的图片库中上传一个喜欢图片上去! 确认信息填写无误之后,可以先点击"预览"按钮预览效果,然后点击"完成定制",这时候会要求我们登录系统,如下图所示: 如果你已经是360安全论坛的用户,则可以直接输入用户名和密码登录