title: CSS placing an absolute div beside another div (pure CSS popover)
body: <p>I have a sidebar with a user profile picture (pink color). When the viewer hover on the image, a <code>div</code> (blue color) appears and it contains user details. Basically, I want an <em>absolute positioned</em> <code>div</code> appear <strong>next to</strong> its sibling.</p>
  
  <p><a href="https://i.stack.imgur.com/NCgHj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NCgHj.png" alt="absolute div beside another div"></a></p>
  
  <p>It is functionally a popover, but I want to do it with pure CSS, is it possible?</p>
  
  <p>I am using boostrap 4, it will be nice if the suggestion can co-exists with Bootstrap CSS. It will be awesome if the <code>div</code> can have an <em>arrow</em> associate with it.</p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div&gt;&lt;figure class="figure"&gt;&lt;img ... /&gt;&lt;/figure&gt;&lt;/div&gt;
      //css-popover
      &lt;div class="css-popover"&gt;User detail: ... bla bla bla ...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried to search in Stackoverflow, most of the question is related to <code>float</code> div and makes it <em>beside</em>, but I want something <code>absolute positioned</code>, and display <em>on top</em> of the body.</p>
  
  <hr>
  
  <p><strong>Update:</strong></p>
  
  <p>Most of the suggestions provided fulfill part of the requests. The suggested <code>.css-popover</code> <em>width</em> and <em>height</em> are bounded by the parents, but I wish the popover <strong>dimension be independent</strong> from the parent, i.e. just "popup" and it doesn't "change" the layout beneath.</p>
  
  <p><a href="https://i.stack.imgur.com/JOZ9F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JOZ9F.png" alt="popup"></a></p>
  
  <p>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.</p>
  
  <p>If it is not possible with CSS, then I just go for JS solution...</p>
  
  <p>You can try your luck here. <strong><a href="https://jsfiddle.net/byanjiong/nohno2bd/13/" rel="nofollow noreferrer">https://jsfiddle.net/byanjiong/nohno2bd/13/</a></strong></p>
  
  <p>(Note: the user content is long, so it height usually will exceed the profile image's height)</p>
  
  <hr>
  
  <p><strong>Update 2:</strong>
  Thanks to @Gezzasa, his solution is working. ^_^</p>
  
  <p>Guy, this is the working example of <strong>pure CSS popover</strong>! Amazing!</p>
  
  <p><strong><a href="https://jsfiddle.net/byanjiong/nohno2bd/15/" rel="nofollow noreferrer">https://jsfiddle.net/byanjiong/nohno2bd/15/</a></strong></p>
  
  <p>Thanks, guy...</p>