Javascript 如何在单击输入时显示工具提示？

我有一个带有文本输入的表单，每当单击一个输入时（或者更好的是，聚焦），就会显示一个工具提示，每当单击其他内容时，工具提示就会消失。我知道我可能应该使用JavaScript的

getElementById

并附加一个点击事件监听器，但我的知识仅限于此。我不知道如何切换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>

[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;
}

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

JavaScript:

<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>

[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;
}

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

---

link

您应该使用Javascript来处理这个问题，这是对的：

var inputs=document.querySelectorAll（'.tooltip'）；
输入。forEach（函数（el）{
el.addEventListener（“点击”，函数（e）{
输入。forEach（功能（el2）{
el2.类列表。删除（“活动”）；
});
this.classList.add（“活动”）；
});
});
[数据提示]{
位置：相对位置；
}
[数据提示]：：之前{
内容：''；
显示：无；
左边框：15px实心透明；
右边框：15px实心透明；
边框顶部：15px实心#ccc；
位置：绝对位置；
顶部：-10px；
左：15px；
z指数：10；
字号：1em；
线高：2米；
宽度：0；
身高：0；
}
[数据提示]>span{
显示：无；
左边框：16px实心透明；
右边框：16px实心透明；
边框顶部：16px纯黑；
位置：绝对位置；
顶部：-9px；
左：14px；
z指数：7；
字号：1em；
线高：2米；
宽度：0；
身高：0；
}
[数据提示]：：之后{
显示：无；
内容：attr（数据提示）；
位置：绝对位置；
顶部：-54px；
左：0px；
边框：1px纯黑；
填充：10px 20px；
背景色：#ccc；
颜色：黑色；
z指数：9；
字体大小：0.75em；
高度：4em；
文本对齐：居中；
垂直对齐：中间对齐；
线高：2米；
-webkit边界半径：0.5em；
-moz边界半径：0.5em；
边界半径：0.5em；
框大小：边框框；
空白：nowrap；
换字：正常；
}
.tooltip.active>span，
[数据提示].活动：：之前，
[数据提示].活动：：之后{
显示：块；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。在酒后驾车的情况下，他是侵权人。这是一个大问题。Sed妊娠期大生命的奉献。潜力悬钩子。克拉斯·卢库斯·波特提托·维韦拉。Aenean ac magna ullamcorper、ullamcorper sem non、mattis felis。在酒后驾车之前，我们的智者会坐在那里。这是一个很好的例子。在这本书中，法雷特拉·尼西和伊洛斯。在最短的唇裂处，有一条金缕梅。Nullam eu孕妇猫咪。这是一个巨大的悬念。在埃拉特发酵粥中的粗粉。欧洲药剂师，欧洲药剂师，nec。

用户名
密码
电子邮件
您应该使用Javascript处理这一问题，这是对的：


var inputs=document.querySelectorAll（'.tooltip'）；
输入。forEach（函数（el）{
el.addEventListener（“点击”，函数（e）{
输入。forEach（功能（el2）{
el2.类列表。删除（“活动”）；
});
this.classList.add（“活动”）；
});
});
[数据提示]{
位置：相对位置；
}
[数据提示]：：之前{
内容：''；
显示：无；
左边框：15px实心透明；
右边框：15px实心透明；
边框顶部：15px实心#ccc；
位置：绝对位置；
顶部：-10px；
左：15px；
z指数：10；
字号：1em；
线高：2米；
宽度：0；
身高：0；
}
[数据提示]>span{
显示：无；
左边框：16px实心透明；
右边框：16px实心透明；
边框顶部：16px纯黑；
位置：绝对位置；
顶部：-9px；
左：14px；
z指数：7；
字号：1em；
线高：2米；
宽度：0；
身高：0；
}
[数据提示]：：之后{
显示：无；
内容：attr（数据提示）；
位置：绝对位置；
顶部：-54px；
左：0px；
边框：1px纯黑；
填充：10px 20px；
背景色：#ccc；
颜色：黑色；
z指数：9；
字体大小：0.75em；
高度：4em；
文本对齐：居中；
垂直对齐：中间对齐；
线高：2米；
-webkit边界半径：0.5em；
-moz边界半径：0.5em；
边界半径：0.5em；
框大小：边框框；
空白：nowrap；
换字：正常；
}
.tooltip.active>span，
[数据提示].活动：：之前，
[数据提示].活动：：之后{
显示：块；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。在酒后驾车的情况下，他是侵权人。这是一个大问题。Sed妊娠期大生命的奉献。潜力悬钩子。克拉斯·卢库斯·波特提托·维韦拉。Aenean ac magna ullamcorper、ullamcorper sem non、mattis felis。在酒后驾车之前，我们的智者会坐在那里。这是一个很好的例子。在这本书中，法雷特拉·尼西和伊洛斯。在最短的唇裂处，有一条金缕梅。Nullam eu孕妇猫咪。这是一个巨大的悬念。在埃拉特发酵粥中的粗粉。欧洲药剂师，欧洲药剂师，nec。

用户名
密码
电子邮件
您不需要javascript来处理此问题，css输入带有伪焦点

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


标签{显示：内联块；}
div{
位置：相对位置；
}
输入~span{
显示：无；
位置：绝对位置；
底部：30px；
}
输入跨距{
显示：块；
位置：相对位置；
边框：1px纯黑；
z指数：3；
背景色：#ccc；
字号：1em；
线高：2米；
边界半径：0.5em；
框大小：边框框；
空白：nowrap；
换字：正常；