Is it possible to use the hover pseudoclass to offset a box 20px from some text?

Question

I have a single line of text:

<p> this is some text <b class="tryHover">hover over here</b> </p>

And when the cursor is over the text "hover over here" I'm trying to get a box with some content to pop up and i'm trying to do it all in css.

So in my css file i have:

.tryHover:hover{

}

I think I get what the above does and it lets me change the properties of the text "hover over here" when the cursor is over it. eg change background-color, etc.

But what I would like to do is have a box that "pops" up that is say 20px below the text when I hover over it.

So I thought I'd create a box class like:

.box {             
   width: 
   height:
   border: 
}

But I'm struggling to figure out if it's possible to make that box appear when hovering over the text using CSS alone.

Thanks.

This [question](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) might help — Carl Binalla, Jan 25 '18 at 07:09
Possible duplicate of [How can I create custom tooltips with css pseudoelements](https://stackoverflow.com/questions/25214632/how-can-i-create-custom-tooltips-with-css-pseudoelements) — Mohammad Usman, Jan 25 '18 at 07:09
See [this](https://stackoverflow.com/questions/17391194/tooltip-with-html-content-without-javascript) also. — Mohammad Usman, Jan 25 '18 at 07:11

Bhuwan · Accepted Answer · 2018-01-25T07:18:33.237

2

You have to make box inside the <b> tag and use position:absolute to .box for the position adjustment.

Remember to set the position:relative of the parent of the .box div.

Stack Snippet

.box {
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 25px;
  display: none;
}

.tryHover {
  position: relative;
  display: inline-block;
}

.tryHover:hover .box {
  display: block;
}

<p> this is some text <b class="tryHover">hover over here<span class="box"></span></b>
</p>

edited Jan 25 '18 at 07:18

answered Jan 25 '18 at 07:11

Bhuwan

16,525
5
34
57

Thx. But is it necessary to have the tag? Can it be done say with just – Mike Jan 25 '18 at 22:43
@Mike you want to show a _box with some content_ when hover over `tryHover`...so you need two elements....one which you want to show and one the other on hover you want to show the box.... – Bhuwan Jan 25 '18 at 22:49

score 1 · Answer 2 · answered Jan 25 '18 at 07:10

The key is nesting your .box (with display:none set by default) inside .tryHover and then giving it display: block inside of .tryHover:hover .box style block:

.box {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  border: 1px solid gray;
  background: #f2f2f2;
  padding: 5px;
}

.tryHover {
  position: relative;
}

.tryHover:hover .box {
  display: inline-block;
}

<p>
  This is some text 
  <strong class="tryHover">hover over here
    <span class="box">Boxed text</span>
  </strong>
</p>

Is it possible to use the hover pseudoclass to offset a box 20px from some text?

2 Answers2