0

Why does the tooltip content align with the left edge of its parent in the following code snippet?

If i give the display of .tooltip-trigger class as inline-block the content aligns with the left edge, but if i do not give the .tooltip-trigger class inline block the content aligns with the left edge of the body.

I am not able to understand this behaviour of position absolute. Can someone please explain why inline-block affects the positioning of the element with position absolute.

tooltip-trigger - inline-block

Content aligned with left edge of parent Content aligneded with left edge of parent

tooltip-trigger - without inline-block

Content aligned with left edge of body Content aligned with left edge of body

Code with inline-block 

<style>
  .tooltip {
    display: none;
    background: white;
    border: 1px solid;
  }
  
  .tooltip-trigger:hover .tooltip {
    display: block;
    position: absolute;
  }
  
  .tooltip-trigger {
    display: inline-block;
  }
</style>

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis illum praesentium quos aspernatur excepturi molestiae quibusdam, deserunt quo voluptas animi.
  <a href="/" class="tooltip-trigger">
    ToolTip Region
    <span class="tooltip">
      Some dummy tooltip content
    </span>
  </a> Lorem ipsum dolor sit amet.
</p>

Code without inline-block 

<style>
  .tooltip {
    display: none;
    background: white;
    border: 1px solid;
  }
  
  .tooltip-trigger:hover .tooltip {
    display: block;
    position: absolute;
  }
</style>

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis illum praesentium quos aspernatur excepturi molestiae quibusdam, deserunt quo voluptas animi.
  <a href="/" class="tooltip-trigger">
    ToolTip Region
    <span class="tooltip">
      Some dummy tooltip content
    </span>
  </a> Lorem ipsum dolor sit amet.
</p>
Daniel Smith
  • 179
  • 8
  • If you don't specify a "coordinate" for absolute positioning, then the element will be absolutely positioned in the place where it would render in normal flow, if it wasn't positioned. Remove the position:absolute, and then check how the tooltip element would render in normal flow, when you don't make the trigger inline-block. – CBroe Nov 09 '22 at 08:45
  • I am aware of this but what does that really mean in this context, why does the inline-block affect the normal flow of this element. – Daniel Smith Nov 09 '22 at 08:46
  • 2
    Because you are making the tooltip `block`, it goes onto a line of its own, when the trigger is not inline-block. Once you make it inline-block, it creates a new box that _contains_ the tooltip element. Add an outline to both of them, then you will see the difference more clearly. – CBroe Nov 09 '22 at 08:48
  • Thanks a lot @CBroe, It makes sense to me now. I was struggling to make sense of this the entire day. If you could please post your comment as an answer i could accept as the correct answer. – Daniel Smith Nov 09 '22 at 09:04

1 Answers1

1

If you don't specify a "coordinate" for absolute positioning, then the element will be absolutely positioned in the place where it would render in normal flow, if it wasn't positioned. Remove the position:absolute, and then check how the tooltip element would render in normal flow, when you don't make the trigger inline-block.

why does the inline-block affect the normal flow of this element

Because you are making the tooltip block, it goes onto a line of its own, when the trigger is not inline-block. Once you make it inline-block, it creates a new box that contains the tooltip element. Add an outline to both of them, then you will see the difference more clearly

CBroe
  • 91,630
  • 14
  • 92
  • 150