仅使用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;
}

但是它目前不起作用，如果有人可以帮助我解决这个问题，感谢您。 fiddle

- BurebistaRuler

---

使用JS会有任何危害吗？ - alwaysLearn

@一起编程吧，不需要用js :) 这很简单，但我找不到完美的组合 :) - BurebistaRuler

http://jquerytools.org/demos/tooltip/form.html - Falguni Panchal

@falguni 那个工具提示的 JS 有 bug，因为它创建了一个带有该工具提示的 div，但没有删除它，不过我不需要使用 JS 来实现 :) - BurebistaRuler

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

- Martin Turjak

---

能否在不改变HTML层次结构的情况下完成这个操作？在我的本地代码中，我无法将该段落插入div中 :( - BurebistaRuler

不幸的是，您需要在输入字段之后插入段落，以便它们成为兄弟节点。如果您使用可编辑的div而不是输入元素，则还可以将工具提示放入此div中或使用“：after”或“：before”伪对象进行tootip，但是“before”和“after”再次不幸不能与输入对象一起使用。因此，除非您可以稍微调整HTML，否则您将无法仅使用CSS根据聚焦的输入字段样式化工具提示。 - Martin Turjak