一个使用css的提示框hint.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标签中，具有局限的使用范围，所以项目中使用时要注意了

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

猜你喜欢