html - CSS 工具提示放在哪里

Question

这里是 CSS 业余爱好者。

EDIT: The problem regarding the focus was already fixed. I just failed to see that there was a space between : and focus on .."number"]: focus. I have a css for a tooltip but I dont know where to put it and how to make it appear only when a textfield is selected.

Fiddle: http://jsfiddle.net/v8xUL/274/

.tooltip
{
position: absolute;
padding: 1px 10px;
margin-left: 6px;
background: #06DEE5;
font-size: 12px;
line-height: 20px;
color: #000;
-moz-box-shadow: 2px 2px 3px #444;
-webkit-box-shadow: 2px 2px 3px #444;
box-shadow: 2px 2px 3px #444;
}

I just got the css above from a website by "Inspect element"

现在，即使没有选择文本框，它也会出现，如图所示:http://i.share.pho.to/694c27e9_o.png .我只需要在选择该文本字段时显示 Please enter name。

Answer 1

你应该使用“显示”

.tooltip 
{
    display: none;
    position: absolute;
    padding: 1px 10px;
    margin-left: 6px;
    background: #06DEE5;
    font-size: 12px;
    line-height: 20px;
    color: #000;
    -moz-box-shadow: 2px 2px 3px #444;
    -webkit-box-shadow: 2px 2px 3px #444;
    box-shadow: 2px 2px 3px #444;
}

form input[type="text"]:focus,
form input[type="number"]: focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus
{
    background: #06DEE5;
}

 input:focus + .tooltip {
    display:block;
}
}