javascript - 单击输入时如何显示工具提示？

Question

我有一个带有文本输入的表单，并且每当单击输入（或者更好的是，聚焦）时都会显示工具提示，并且每当单击其他内容时它应该消失。我知道我可能应该使用 JavaScriptgetElementById并附加一个单击事件侦听器，但我的知识就止于此了。我不确定如何切换当前正在工作但悬停的 CSS 代码。我不是在寻找:active伪类。

HTML：

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae consequat dui, ut ultricies tortor. Fusce imperdiet augue sit amet magna lobortis eleifend. Sed gravida consectetur magna vitae luctus. Suspendisse potenti. Cras luctus porttitor viverra. Aenean ac magna ullamcorper, ullamcorper sem non, mattis felis. Morbi ultricies pretium dui, quis posuere sapien tristique sit amet. Sed et velit tincidunt, convallis enim sed, imperdiet lectus. In quis diam aliquet, pharetra nisi et, interdum eros. Nullam rutrum lectus at est lacinia facilisis. Nullam eu gravida felis. Suspendisse ut magna id nisi fringilla venenatis. Cras facilisis tellus at erat fermentum congue. Nullam dapibus varius nibh, eu pharetra leo vehicula nec.
</p>
<label>Username</label>
<div data-tip="Only A-Z">
  <span></span>
  <input id='username-input' type="text">
</div>
<label>Password</label>
<div data-tip="8 characters minimum">
  <span></span>
  <input id='password-input' type="text">
</div>
<label>Email</label>
<div data-tip="E-mail is only for registration">
  <span></span>
  <input id='email-input' type="text">
</div>

CSS：

[data-tip] {
    position: relative;

}

[data-tip]::before {
    content: '';
    display: none;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #ccc;
    position: absolute;
    top: -10px;
    left: 15px;
    z-index: 10;
    font-size: 1em;
    line-height: 2em;
    width: 0;
    height: 0;
}

[data-tip] > span {
  display: none;
  border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid black;
    position: absolute;
    top: -9px;
    left: 14px;
    z-index: 7;
    font-size: 1em;
    line-height: 2em;
    width: 0;
    height: 0;

}

[data-tip]::after {
    display: none;
    content: attr(data-tip);
    position: absolute;
    top: -54px;
    left: 0px;
    border: 1px solid black;
    padding: 10px 20px;
    background-color: #ccc;
    color: black;
    z-index: 9;
    font-size: 0.75em;
    height: 4em;
    text-align: center;
    vertical-align: middle;
    line-height: 2em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: normal;
}

[data-tip]:hover > span,
[data-tip]:hover::before,
[data-tip]:hover::after {
    display: block;
}

JavaScript：

input = document.getElementById('email-input');
input.addEventListener('click', function() {
    /* toggle CSS code */
});

jsfiddle链接

标签： javascripthtmlcss

Answer 1

你不需要javascript来处理这个，css输入带有焦点伪，

我已经修改了你的代码，你可以运行下面的代码片段：

label { display: inline-block; }

div {
	position: relative;
}

input ~ span {
  display: none;
	position: absolute;
	bottom: 30px;	
}

input ~ span span {
  display: block;
  position: relative;
  border: 1px solid black;
  z-index: 3;
  background-color: #ccc;
  font-size: 1em;
	line-height: 2em;
  border-radius: 0.5em;
  box-sizing: border-box;
  white-space: nowrap;
	word-wrap: normal;
	color: black;
	height: 4em;
  text-align: center;
  vertical-align: middle;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
  padding: 10px 20px;
}

input ~ span::before {
	content: '';
	display: none;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #ccc;
	position: absolute;
	bottom: -10px;
  left: 14px;
	z-index: 9;
	font-size: 1em;
	line-height: 2em;
	width: 0;
	height: 0;
}

input ~ span::after {
	content: '';
	display: none;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 15px solid black;
	position: absolute;
  bottom: -11px;
  left: 13px;
	z-index: 1;
	font-size: 1em;
	line-height: 2em;
	width: 0;
	height: 0;
}

input:focus ~ span::before,
input:focus ~ span::after,
input:focus ~ span {
 display: block;
}

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae consequat dui, ut ultricies tortor. Fusce imperdiet augue sit amet magna lobortis eleifend. Sed gravida consectetur magna vitae luctus. Suspendisse potenti. Cras luctus porttitor viverra. Aenean ac magna ullamcorper, ullamcorper sem non, mattis felis. Morbi ultricies pretium dui, quis posuere sapien tristique sit amet. Sed et velit tincidunt, convallis enim sed, imperdiet lectus. In quis diam aliquet, pharetra nisi et, interdum eros. Nullam rutrum lectus at est lacinia facilisis. Nullam eu gravida felis. Suspendisse ut magna id nisi fringilla venenatis. Cras facilisis tellus at erat fermentum congue. Nullam dapibus varius nibh, eu pharetra leo vehicula nec.
</p>
<label>Username</label>
<div>
  <input id='username-input' type="text">
  <span><span>Only A-Z</span></span>
</div>
<label>Password</label>
<div>
  <input id='password-input' type="text">
  <span><span>8 characters minimum</span></span>
</div>
<label>Email</label>
<div >
  <input id='email-input' type="text">
  <span>
    <span>E-mail is only for registration</span>
  </span>
</div>