display tooltip with css only

Question

I want to have a tooltip on input:focus so what I have:

Code:

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

This works great when hover over containerTooltipXxx div but I need to show that tooltip when input is focused so I've tried something like:

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

but is not working so if someone can help me with this, Thank you.

fiddle

Answer 1

I would place the tooltip after the input field (in the html) and then use the adjacent selector (+):

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