用CSS显示工具提示仅

我想有input:focus工具提示所以我有什么：用CSS显示工具提示仅

HTML：

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

CSS：

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

这个伟大的工程时，将鼠标悬停在containerTooltipXxx div但我需要显示工具提示时，输入是集中，所以我试过类似的东西：

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

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

fiddle

来源

2013-07-02 BurebistaRuler

任何伤害使用js？ – alwaysLearn

@让我们的代码不需要js :)很简单，但我没有找到完美的组合:) – BurebistaRuler

http://jquerytools.org/demos/tooltip/form.html – falguni

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

.containerTooltipXxx input:focus + .hovTol1 {}

DEMO

来源

2013-07-02 07:47:00

非常感谢:) – BurebistaRuler

可以在不更改html层次结构的情况下做到这一点吗？在我的本地代码中，我不能在div中插入该段落：（ – BurebistaRuler

不幸的是，您需要在输入字段之后的某个位置插入段落，以便它们是兄弟。如果要使用可编辑的div而不是输入元素，也可以把工具提示放到这个div中，或者对于tootip使用'：after'或者'：before'伪对象，但是'before'和'after'不幸的是不能和输入对象一起使用，所以除非你可以调整html有一点，您将无法根据焦点输入字段只使用CSS来创建工具提示。 –

用CSS显示工具提示仅

回答

相关问题