`
xkorey
  • 浏览: 153536 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

开心网tooltip

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
  <TITLE> ToolTip</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<style type="text/css">
*{padding:0; margin:0;}
.it3{background:#fff url(http://img1.kaixin001.com.cn/i/ccts_bg.gif) bottom repeat-x; border:1px solid #DD7870; color:#333;}
.box{background:url(http://img1.kaixin001.com.cn/i/bottom-left-w.gif) no-repeat left bottom;}
.box-outer{background:url(http://img1.kaixin001.com.cn/i/bottom-right-w.gif) no-repeat right bottom;}
.box-inner{background:url(http://img1.kaixin001.com.cn/i/top-left-w.gif) no-repeat left top;}
.box p{background:url(http://img1.kaixin001.com.cn/i/top-right-w.gif) no-repeat right top; padding-left:20px; padding-top:10px; padding-bottom:15px; padding-right:20px;margin:0;}
.box-t {background:url(http://img1.kaixin001.com.cn/i/bottom-left-t.gif) no-repeat left bottom; position:absolute; top:-8px; left:252px;}
.box-outer-t{background:url(http://img1.kaixin001.com.cn/i/bottom-right-t.gif) no-repeat right bottom;}
.box-inner-t{background:url(http://img1.kaixin001.com.cn/i/top-left-t.gif) no-repeat left top;}
.box-t p{background:url(http://img1.kaixin001.com.cn/i/top-right-t.gif) no-repeat right top; padding-left:20px; padding-top:10px; padding-bottom:15px; padding-right:10px; line-height:2em; margin:0;}
.box-t span{background:url(http://img1.kaixin001.com.cn/i/top-right-t.gif) no-repeat right top; padding:10px 20px; display:block;}
.hid{visibility:hidden;}
#main{width:90%;height:600px;top repeat-x;margin:0 auto;border-right:1px solid #bbb;border-left:1px solid #bbb;padding:39px auto;background:#ffffff;text-align:center;}
.it_s{display:table;padding:50px auto;width:150px;height:19px;}
.ce{width:610px;height:400px}
.zc2{float:left; width:222px; padding-left:8px; position:relative;}
.box-login {
background:url(http://img1.kaixin001.com.cn/i/top-login.gif) no-repeat  top left;width:362px; margin:0 auto;padding:0px 0;
}
.box-login p {
background:url(http://img1.kaixin001.com.cn/i/bottom-login.gif) no-repeat  bottom left;
padding-top:10px;
padding-right:20px;
padding-bottom:20px;
}

</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function tpFocus(){
document.getElementById("tp_tooltip").style.visibility=""
document.getElementById("tp_tooltip").innerHTML=document.getElementById("one").innerHTML;
}
function tpBlur(){
document.getElementById("tp_tooltip").style.visibility="hidden";
}
function afFocus(){
document.getElementById("two_tip").style.visibility=""
document.getElementById("two_tip").innerHTML=document.getElementById("two").innerHTML;
}
function afBlur(){
document.getElementById("two_tip").style.visibility="hidden";
}

function aeFocus(){
document.getElementById("three_tip").style.visibility=""
document.getElementById("three_tip").innerHTML=document.getElementById("three").innerHTML;
}
function aeBlur(){
document.getElementById("three_tip").style.visibility="hidden";
}
//-->
</SCRIPT>
</HEAD>

<BODY>

<div id="main">
<div class="ce">
<div class="hid">
<p>|</p><p>|</p><p>|</p><p>|</p><p>|</p><p>|</p>
</div >

<div id=three_tip style="text-align:center;"></div>
<div class="zc2">
birth:<input type="text" name="ae" id="ae" onfocus="aeFocus();" onblur="aeBlur();" ></input>
</div>

<div class="hid">
<p>|</p><p>|</p>
</div>
<div class="zc2">
Name:<input type="text" name="tp" id="tp" onfocus="tpFocus();" onblur="tpBlur();" ></input>
<div id=tp_tooltip></div>
</div>
<div class="hid">
<p>|</p><p>|</p>
</div>
<div class="zc2">
sex:<input type="text" id="af" onfocus="afFocus()" onblur="afBlur()"/>
<div id="two_tip"></div>
</div>
<div class="hid">
<p>|</p><p>|</p>
</div>

</div>
</div>






<div class="hid" id="one">
<div class="box-t" style="width: 25em;">
<div class="box-outer-t">
<div class="box-inner-t">
<p>输入您的姓名</p>
</div>
</div>
</div>
</div>

<div class="hid" id="two">
<div class="box" style="width: 15em; position: absolute; top: -8px; left: 252px;">
<div class="box-outer">
<div class="box-inner">
<p>输入您的姓名</p>
</div>
</div>
</div>


<div id="three" class="hid">
<div  class="box-login">
<p>这里输入您的提示信息~~<a href="a.com">a</a></p>
</div>

</div>
</BODY>
</HTML>


顺便问下着个算侵权吗?

分享到:
评论

相关推荐

    Tooltip

    【Tooltip】是一个在软件开发中常见的用户界面元素,它的全称是“工具提示”,用于向用户提供额外的信息。当用户将鼠标悬停在某个控件上时,Tooltip会显示一个小窗口,展示该控件的功能或者相关说明,帮助用户理解不...

    WXA-ToolTip-微信小程序-ToolTip信息提示组件.zip

    微信小程序-ToolTip信息提示组件导入将ToolTip文件夹复制到pages文件夹内使用在需要使用ToolTip的页面对应的.wxml文件中添加: src="../ToolTip/toolTip.wxml"/&gt; &lt;!-- 引入toolTip模板 --&gt;  is=...

    tooltip

    在IT行业中,"tooltip"是一个常见的交互元素,主要用于在用户将鼠标悬停在特定元素上时显示额外的信息。这个压缩包文件包含了一些关于tooltip实现的基本资源,如样式表(tooltip.css),HTML页面(tooltip.htm),...

    WPF修改Tooltip样式

    在Windows Presentation Foundation (WPF) 中,Tooltip是一个用于显示与鼠标指针相关的简短提示信息的控件。它通常在用户将鼠标悬停在其他UI元素上时出现,提供额外的信息。在默认情况下,Tooltip的样式是有限的,但...

    c# ToolTip 几十种效果 集合了各种ToolTip 效果 很难得哦 源码

    【标题】中的“c# ToolTip 几十种效果”是指使用C#编程语言实现的ToolTip控件的各种显示效果集合。ToolTip控件是Windows Forms或WPF应用中常见的一种组件,它通常用于在鼠标悬停在某个控件上时显示额外的信息。这个...

    ToolTip提示脚本文件

    【ToolTip提示脚本文件】 在IT领域,ToolTip是一种常见的用户界面元素,用于向用户提供额外的信息。当鼠标指针悬停在某个元素上时,ToolTip会显示一个包含详细说明的小窗口,帮助用户理解该元素的功能或内容。在...

    表格单元格自定义ToolTip组件

    "表格单元格自定义ToolTip组件"是一个专门解决UI交互问题的工具,它允许开发者根据需求为表格中的每个单元格提供更加详细和丰富的信息提示。这种自定义的ToolTip在Flex组件上特别有用,Flex是一种强大的富互联网应用...

    vc中tooltip应用

    在VC++编程环境中,Tooltip是一种常见的用户界面组件,它能够在鼠标悬停在某个控件上时,显示简短的信息提示。"vc中tooltip应用"这个主题着重于如何在Visual C++项目中有效地利用Tooltip控件,提升用户体验。下面将...

    标准控件及数据窗口的tooltip示例

    在PowerBuilder(PB)环境中,"标准控件"和"数据窗口"是两个核心元素,而"tooltip"则是一种非常实用的功能,可以显示在鼠标悬停时提供额外帮助文本的工具提示。本示例主要探讨如何在SLE(Single Line Edit,单行编辑...

    winform比较好的tooltip

    在Windows Forms(WinForm)开发中,Tooltip是一个非常实用的控件,它可以在鼠标悬停在其他控件上时显示相关信息提示。标题“winform比较好的tooltip”表明我们正在讨论如何在WinForm应用中实现一个高质量、用户体验...

    一个ajax的tooltip例子

    【Ajax Tooltip】是一种交互式用户界面元素,它利用Ajax(异步JavaScript和XML)技术来动态显示与鼠标指针相关的提示信息。在网页设计中,Tooltip通常用于提供额外的上下文信息,当用户将鼠标悬停在某个元素上时,会...

    MFC最全ToolTip例子+源文件

    在Microsoft Foundation Class (MFC)库中,ToolTip控件是一个非常实用的功能,它可以在用户将鼠标悬停在某个控件上时显示简短的帮助文本。`MFC最全ToolTip例子+源文件`这个资源包提供了关于如何在MFC应用程序中使用...

    winform 自定义tooltip

    在Windows Forms(Winform)开发中,Tooltip是一个非常常见的组件,用于显示鼠标悬停在控件上时的简短提示信息。默认的Tooltip组件虽然功能简单,但在某些情况下可能无法满足复杂的用户界面需求。因此,自定义...

    MFC_ToolTip超级类(可以实现各种类型的ToolTip的弹出)

    标题“MFC_ToolTip超级类”指的是一个专门扩展了MFC原生`CToolTipCtrl`类的自定义类,以实现更丰富的功能,比如创建不同类型的ToolTip。 `ToolTip`控件通常用来提供关于用户界面上各个控件的额外信息,当鼠标悬停在...

    带有图像的ToolTip显示功能

    "带有图像的ToolTip显示功能"是一个增强UI交互性的技术,它允许在鼠标悬停时显示不仅包含文本,还包含图像的提示信息。这样的功能在很多应用场景下都非常有用,比如在帮助用户理解复杂图标或按钮的含义时,或者在...

    基于Vue的简单tooltip工具

    在前端开发中,提示工具(Tooltip)是一种常见且实用的UI元素,用于向用户提供额外的信息或解释某些元素的功能。在本教程中,我们将探讨如何基于Vue框架创建一个简单的Tooltip工具,这将帮助开发者更好地理解Vue组件...

    DataGrid实现tooltip功能

    ### DataGrid实现tooltip功能 #### 一、简介 在Web开发中,为了提供更好的用户体验,开发者经常需要在用户界面中加入提示信息。其中,`tooltip`(工具提示)是一种非常实用的功能,它可以在用户鼠标悬停在某个元素...

    VC tooltip 源代码

    在Windows应用程序开发中,Tooltip是一种常见的用户界面元素,它能够在鼠标悬停在某个控件上时,显示关于该控件的简短说明信息。在VC++(Visual C++)环境中,Tooltip的使用可以让用户更容易理解复杂的界面元素。...

    JQuery-Tooltip-Plugin

    《jQuery Tooltip 插件详解与应用实践》 在Web开发中,Tooltip是一种常见的交互元素,它可以在鼠标悬停在特定元素上时显示额外的信息。jQuery作为一款强大的JavaScript库,提供了丰富的插件来增强这种功能,其中之...

Global site tag (gtag.js) - Google Analytics