CSS placing an absolute div beside another div (pure CSS popover)

Question

I have a sidebar with a user profile picture (pink color). When the viewer hover on the image, a div (blue color) appears and it contains user details. Basically, I want an absolute positioned div appear next to its sibling.

It is functionally a popover, but I want to do it with pure CSS, is it possible?

I am using boostrap 4, it will be nice if the suggestion can co-exists with Bootstrap CSS. It will be awesome if the div can have an arrow associate with it.

My code is:

<div>
    <div><figure class="figure"><img ... /></figure></div>
    //css-popover
    <div class="css-popover">User detail: ... bla bla bla ...</div>
</div>

I tried to search in Stackoverflow, most of the question is related to float div and makes it beside, but I want something absolute positioned, and display on top of the body.

---

Update:

Most of the suggestions provided fulfill part of the requests. The suggested .css-popover width and height are bounded by the parents, but I wish the popover dimension be independent from the parent, i.e. just "popup" and it doesn't "change" the layout beneath.

And when the popup appear, it doesn't change the parent height too. I wish the sidebar "icon" (light pink icons) stay in place whenever a popup appear.

If it is not possible with CSS, then I just go for JS solution...

You can try your luck here. https://jsfiddle.net/byanjiong/nohno2bd/13/

(Note: the user content is long, so it height usually will exceed the profile image's height)

---

Update 2: Thanks to @Gezzasa, his solution is working. ^_^

Guy, this is the working example of pure CSS popover! Amazing!

https://jsfiddle.net/byanjiong/nohno2bd/15/

Thanks, guy...

Answer 1

https://jsfiddle.net/dqwtvf1g/3/

hover set on the parent and set the child to display: block;

You'll need to add the absolute position etc but this is how I've done it before.

.figure {background-color: #fff; width: 100px; height: 100px;}
.css-popover {display: none; width: 50px; height: 50px; background-color: #fff;}
.parent:hover .css-popover{display: block;}

UPDATE: Made the parent display: inline-block but you can always just add a width.

UPDATE2: I've added some css animation for you as well.

UPDATE3: Edited your fiddle https://jsfiddle.net/byanjiong/nohno2bd/15/

Answer 2

This is one pure CSS solution.. But i recomend using JS

body {
  margin: 0px;
}

.figure {
  height: 20px;
  width: 100px;
  background: pink;
  float: left;
  margin: 0px;
}

.figure+.css-popover {
  height: 50px;
  width: 0px;
  background: lightblue;
  transition: all 0.3s ease;
  float: left;
  position: relative;
  visibility: hidden;
  left: 5px;
  overflow: hidden;
  padding: 10px;
}

.figure+.css-popover::before {
  content: '';
  display: inline-block;
  height: 0px;
  width: 0px;
  border: 5px solid transparent;
  border-right: 5px solid lightblue;
  position: absolute;
  top: 5px;
  left: -10px;
}

.figure:hover+.css-popover,
.css-popover:hover {
  width: 100px;
  visibility: visible;
  overflow: visible;
}

.clearfic,
.clearfix:after,
.clearfix:before {
  content: "";
  clear: both;
  display: table;
}

<div class="clearfix">
  <figure class="figure"></figure>
  <div class="css-popover">User detail: ... bla bla bla ...</div>
</div>
<div>Some content</div>

EDIT : Added arrow

Answer 3

1) With Pure css.

.wrap {
   position: relative;;
}

.im {
   width: 200px;
}

img {
   width: 100%;
}

.css-popover{
   display: none;
}

.im:hover + .css-popover {
   display: block;
}

figure {
   margin: 0;
}

<div class="wrap">
   <div class="im">
    	<figure class="figure"><img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" /></figure>
   </div>
   <div class="css-popover">User detail: ... bla bla bla ...</div>
</div>

2) With Jquery

$(document).ready(function(){
	$('.figure img').hover(function(){
		$('.css-popover').css('display','block');
	},function(){
		$('.css-popover').css('display','none');
   })
})

.css-popover {
  display: none;
}

img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
   <div>
       <figure class="figure"><img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" /></figure>
    </div>
    <div class="css-popover">User detail: ... bla bla bla ...</div>
</div>

Answer 4

hi you can try something like this

html

<div class="container">
  <div class="img-con">
  <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" alt="" />
    <div class="info-con">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam modi, distinctio nostrum reprehenderit explicabo amet exped
  </div>
  </div>

</div>

css

.img-con
{
  height:150px;
  width:150px;
  position: relative;
}
.info-con
{
  position: absolute;
  top:0;
  right:0;
  background-color: #5C6BC0;
  bottom:0;
  left:0;
  height:100%;
  width:100%;
  margin:auto;
  transition:all ease 0.4s;
  padding:3px;
  opacity:0;
}
.info-con::after
{
  content:"";
  position: absolute;
  left:-40px;
  top:0;
  bottom:0;
  margin:auto;
  height:0;
  border:20px solid transparent;
  border-right-color:#5C6BC0;
}
.img-con:hover .info-con
{
  right:-110%;
  left:auto;
  opacity:1;
}

link for reference

Answer 5

Change dimensions as per your need

.popover-container{
  position: relative;
}
.css-popover{
  position: absolute;
}
.css-popover {
	background: #88b7d5;
	border: 4px solid #c2e1f5;
}
.css-popover:after, .css-popover:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.css-popover:after {
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #88b7d5;
	border-width: 30px;
	margin-top: -30px;
}
.css-popover:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: #c2e1f5;
	border-width: 36px;
	margin-top: -36px;
}

<div>
    <div class = "popover-container" ><figure class="figure"><img ... /></figure><div class="css-popover">User detail: ... bla bla bla ...</div></div>

    
</div>