我用Django为我的网站创建了一个注册页面。
在这个表单中，我想在输入字段旁边放一些小方框或气球。
例如，当用户点击或悬停在密码输入字段旁边的框时，应该写上"密码应该是8个字母，包括1个大写字母"等。
我该怎么做？
signup.html
<!DOCTYPE html>
<html lang="en">
{% load static %}
<link rel="stylesheet" href="{% static 'css/signup.css' %}">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="radio" id="toggle--signup" name="toggle" class="ghost" />
<! –– <img class="logo framed" src="https://www.tumblr.com/images/logo/logo_large.png?v=7ea0eb57dd627a95f82be5bde0c43d59" alt="Tumblr logo" /> ––>
<form class="form form--signup framed" method="post">
{% csrf_token %}
<h1 class=" text--centered">PHARSYS</h1>
<h2 class="text text--centered text--omega">Join Us!</h2>
<input type="text" placeholder="Username" name="username" maxlength="150" autofocus required id="id_username" class="input input--top">
<input type="text" placeholder="First name" name="first_name" maxlength="30" id="id_first_name" class="input">
<input type="text" placeholder="Last name" name="last_name" maxlength="30" id="id_last_name" class="input">
<input type="email" placeholder="Email" class="input" name="email" maxlength="254" id="id_email"/>
<input type="password" placeholder="Password" class="input" name="password1" required id="id_password1">
<input type="password" placeholder="Confirm password" class="input" name="password2" required id="id_password2">
<select class="input" name="user_type" required id="id_user_type">
<option value="" selected>User Type</option>
<option value="pharmacist">Pharmacist</option>
<option value="manager">Medical Repository Manager</option>
</select>
<button type="submit" class="input input--submit">Sign Up!</button>
<a class="text text--small text--centered" href="/users/login">I am already a member</a>
</form>
<div class="fullscreen-bg"></div>
</body>
</html>
我刚刚在这里找到了一个解决方案，但我将向您展示如何在代码中使用它：
CSS:
a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}
a.info:hover{z-index:25; background-color:#ff0}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center}
当你将鼠标悬停在正在使用的东西上时，这将控制盒子的实际外观，所以很明显，你可以随意更改它。把它放在你的signup.html中看起来有点像这样：
HTML:
<a class=info href="#"><input type="text" placeholder="Username" name="username" maxlength="150" autofocus required id="id_username" class="input input--top">
<span>I'm a tooltip!</span></a>