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

@Let's Code No need for js :) is very simple but I don't find the perfect combination :) — BurebistaRuler
– BurebistaRuler, Commented Jul 2, 2013 at 7:42
@falguni that tooltip js is buggy because he create a div with that tooltip but not delete it, however I don't need to use a js for that :) — BurebistaRuler
– BurebistaRuler, Commented Jul 2, 2013 at 7:49

MaxiGui · Accepted Answer · 2021-02-24 11:57:48Z

4

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

edited Feb 24, 2021 at 11:57

MaxiGui

6,3784 gold badges18 silver badges36 bronze badges

answered Jul 2, 2013 at 7:47

Martin Turjak

21.3k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BurebistaRuler Over a year ago

it is possible to do that without changing html hierarchy ? in my local code I cannot insert that paragraph inside div :(

Martin Turjak Over a year ago

unfortunately, you need to insert the paragraph somewhere after the input field, so that they are siblings. If you would use an editable div instead of an input element, you could also put the tooltip into this div or use an :after or :before pseudo-object for the tootip, but before and after again unfortunately can not be used with input objects. So unless you can adjust the html a little, you will not be able to style the tooltip according to the focused input field only with CSS.

Collectives™ on Stack Overflow

display tooltip with css only

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related