`
流浪鱼
  • 浏览: 1683718 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一个使用css的提示框hint.css

    博客分类:
  • css
 
阅读更多

hint.css是使用css的一个提示框框架

源码的例子为:

    	<h1>HINT.css</h1>
		<h3>一个提示框tooltip库使用CSS</h3>
		<p> 
			<a href="#" class="hint--top" data-hint="提示消息在上边的了">提示在顶部</a>
		</p>
		<p>
			<a href="#" class="hint--right" data-hint="提示消息在右边的了">提示在右边</a>
		</p>
		<p>
			<a href="#" class="hint--bottom" data-hint="提示消息在底部">提示在底部</a>
		</p>
		<p>
			<a href="#" class="hint--left" data-hint="提示消息在右边...">提示在左边</a></p>
		<p><a class="hint--right" data-hint="Made by Kushagra Gour" target="_blank" href="https://twitter.com/chinchang457"><img  src="http://www.gravatar.com/avatar/6be4e636e8aacd405bed5cd15124a875?s=80&d=mm&"></a>
		</p>
		<p>
			<a class="hint--top  hint--error" data-hint="This is an error tooltip">hint--error错误提示信息框</a>
		</p>
		<p>
			<a class="hint--left  hint--warning" data-hint="This is a warning tooltip"> hint--warning提示信息框</a>
		</p>
		<p>
			<a class="hint--right  hint--info" data-hint="This is an info tooltip">hint--infoInfo的提示信息框</a>
		</p>
		<p>
			<a class="hint--bottom  hint--success" data-hint="This is a success tooltip">hint--success成功提示信息框</a>
		</p>
    <h3>Extra</h3>
    <p>
			<a class="hint--left  hint--always" data-hint="...which always keep showing">一直显示的tooltips...</a>
		</p>
    <p>
      <a class="hint--top  hint--rounded" data-hint="We have rounded corners for you">边角为圆形提示框</a>
    </p>

 自己进行的业务逻辑的验证代码:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>使用业务意义进行测试</title>
        <meta name="description" content="A tooltip library in CSS">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="hint.css">
    </head>
    <body>
		<h3>一个提示框tooltip库使用CSS</h3>
		<table class="regTable" >
			<tr>
				<td class="lableText1">用户名:</td>
				<td class="inputFiled"><input type="text" name="userInfo.username" class="fillTd3 hint--top" data-hint="用户名由5-10位字母和数字组成" id="username"></td>
				<td class="hint--top" data-hint="用户名由5-10位字母和数字组成">(用户名由5-10位字母和数字组成)
				<a class="hint--top" data-hint="用户名由5-10位字母和数字组成">只能使用a标签</a>
				</td>
			</tr>
		</table>
    </body>
</html>

进行上面的测试发现在(IE9以前浏览器)只能使用在a标签中,具有局限的使用范围,所以项目中使用时要注意了

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    前端项目-simple-hint.zip

    开发者可能利用伪类(如`:hover`)来控制提示的显示和隐藏,以及使用`position`属性来定位提示框相对于触发元素的位置。 2. **CSS布局技巧** 创建工具提示时,可能会涉及到一些高级CSS布局技术,例如Flexbox或Grid...

    simplehint提示信息用css做的兼容性IE9

    在本案例中,`simple-hint`是一个用CSS实现的提示信息系统,特别强调了对IE9浏览器的兼容性。 IE9(Internet Explorer 9)虽然在现代浏览器市场中的份额已经很小,但在某些环境下仍然需要支持。由于IE9对于CSS3新...

    css+jquery美化文本框,选择框

    这些文件可能包括一个或多个样式表(如`styles.css`),以及包含jQuery脚本的`script.js`文件。通过分析这些代码,你可以学习到如何结合CSS和jQuery,使网页中的文本框和选择框更加美观和功能丰富。 总之,CSS和...

    一个好看的Form表单源码

    本案例展示了一个使用HTML5和CSS3创建的精美Form表单。 #### 二、基本结构与样式设置 1. **文档类型声明**:`&lt;!DOCTYPE html&gt;`,表示这是一个HTML5文档。 2. **HTML元素定义**: - `&lt;head&gt;`部分包含了文档的元...

    输入框提示文字上浮

    在UI设计和前端开发中,"输入框提示文字上浮"是一种常见的交互设计方式,它主要体现在当用户聚焦到输入框时,原本显示在输入框内的提示性文字(hint)会浮升到输入框的上方,形成一种清晰的提示效果。这种设计能够...

    带提示信息的编辑框

    开发者通常会设置一个隐藏或透明的标签位于编辑框内部,当编辑框获得焦点或用户开始输入时,标签的文本会变为空或者隐藏,反之,当编辑框失去焦点且无输入时,标签的文本又会重新出现。 实现这样的功能可以有多种...

    网上找的网页气球提示友好窗口

    为了使气球提示更个性化,我们可以使用CSS来定制气球的样式,例如改变字体大小、颜色、背景色,甚至添加动画效果。此外,还可以通过JavaScript动态改变提示文本的内容,实现更丰富的交互。 总的来说,创建网页气球...

    jQuery bootstrap网页步骤引导新手特效.zip

    `bootstrap.min.js`包含了Bootstrap的JavaScript组件,如模态框、下拉菜单等,而`style.css`则包含了引导特效的定制样式,可能包括高亮元素、提示框样式等。 `hint-sequence.js`是这个引导特效的主控脚本,它可能...

    CSS 样式命名规则

    一个好的CSS类名应该具有清晰的意义,能够直观地反映出它的功能或样式特性,避免使用过于具体的值,如颜色名或尺寸。例如,避免使用`red`或`font14`作为类名,因为这些名称在样式变化时会失去意义。同样,避免使用...

    jquery+css实现下拉列表功能

    本示例将介绍如何使用jQuery和CSS结合实现一个下拉列表功能。首先,我们来看一下涉及的关键知识点: 1. **jQuery**: jQuery 是一个轻量级的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互。...

    js表单输入提示内容

    例如,我们可以添加一个错误消息元素并用JavaScript或jQuery更新其内容: ```html 请输入内容..."&gt; &lt;div id="errorMessage"&gt;&lt;/div&gt; ``` 然后在JavaScript中添加验证逻辑: ```javascript $inputField.blur...

    jquery等待效果示例

    例如,这里使用了一个带有样式的`&lt;div&gt;`元素作为等待提示框,并且包含了一个GIF动画和一段文本。 ```html &lt;div id="query_hint" class="query_hint"&gt; &lt;img src="http://static.oschina.net/uploads/space/2014/...

    编写CSS代码时样式的命名规则

    - .hint_suc_blogset:表示一个日志设置成功后的提示信息,"suc"表示成功,"blogset"表示是针对日志设置的提示。 - .pop_set_photo:表示一个相册弹出的设置层,"pop"表示弹出层,"set_photo"表示是针对照片的设置。...

    HarmonyOS应用开发-Search实现

    下面是一个简单的示例代码,展示了如何在HarmonyOS应用中使用 `&lt;search&gt;` 组件: ```html &lt;search hint="请输入搜索内容" searchbutton="搜索" @search="search"&gt; ``` 在这段代码中: - `...

    jQuery星星评分插件jquery.raty.js

    2. 显示评分提示:利用`hint`选项,可以在鼠标悬停在星星上时显示当前分数的提示。 3. 动态更新评分:通过调用`.raty('score')`方法,可以动态更新评分显示。 4. 读取已保存评分:如果用户之前已经给出评分,可以...

    js实现表单检测及表单提示的方法

    例如,`.hint`类定义了一个提示框,初始状态是隐藏的(`display:none;`),并且具有绝对定位,可以放置在输入框旁边。`.hint-pointer`类定义了一个指向输入框的三角符号,使用了背景图片来实现这一效果。 然后是...

    print-hint:强调3D打印专家,爱好者和文化的社交网络概念

    综合以上信息,我们可以推测"print-hint"项目是一个使用JavaScript技术开发的,跨平台的3D打印社交应用。它将为用户提供关于3D打印的最新新闻、资讯,并且允许用户参与社区互动,分享和学习3D打印的知识和技巧。...

    20款非常优秀的 jQuery 工具提示插件 推荐

    jQuery,作为一个强大的JavaScript库,拥有丰富的插件生态系统,使得创建动态、美观的工具提示变得简单易行。本文将详细介绍20款非常优秀的jQuery工具提示插件,帮助你轻松实现各种各样的提示效果。 1. Dynamic ...

    使用impress.js制作幻灯片

    为了增加用户体验,可以添加一个提示,告诉用户如何使用方向键控制幻灯片的播放: ```html &lt;div class="hint"&gt; 请用方向键控制 ``` 最后,确保在页面底部引入impress.js库并启动它: ```html ...

Global site tag (gtag.js) - Google Analytics