html - 仅使用 css 显示工具提示

Question

我想要一个工具提示，input:focus所以我有：

代码：

.containerTooltipXxx{
    padding: 20px; 
    position: relative;
  float: left;
    display: inline-block;
    border: 2px solid lime;
    margin: 50px;
}

.hovTol1{display: none;}

.containerTooltipXxx:hover > .hovTol1{
    display: block;
    position: absolute;
    top:-5px;
    left: 50px;
    background: red;
}

<div class="containerTooltipXxx">
    <p class="hovTol1">Tooltip description is here</p>
    <div class="blocks">
      <label>Field</label>  <input></input>
    </div>
</div>

这在将鼠标悬停在 containerTooltipXxx div 上时效果很好，但是我需要在输入集中时显示该工具提示，所以我尝试了类似的方法：

.containerTooltipXxx input:focus> .hovTol1{
    display: block;
    position: absolute;
    top:-5px;
    left: 50px;
    background: red;
}

但不工作，所以如果有人可以帮助我，谢谢。

小提琴

Answer 1

我会将工具提示放在输入字段之后（在 html 中），然后使用相邻的选择器（+）：

.containerTooltipXxx input:focus + .hovTol1 {}

.containerTooltipXxx{
    padding: 20px; 
    position: relative;
    float: left;
    display: inline-block;
    border: 2px solid lime;
    margin: 50px;
}

.hovTol1{display: none;}

.containerTooltipXxx input:focus + .hovTol1{
    display: block;
    position: absolute;
    top:-5px;
    left: 50px;
    background: red;
}

<div class="containerTooltipXxx">
  <div class="blocks">
    <label>Field</label>  <input></input>
    <p class="hovTol1">Tooltip description is here</p>
  </div>
</div>

<!-- hover section with green border to see the tooltip-->