Reactstrap tooltip to be placed on the bottom of whole div, not its children

Question

I used reactstrap Tootltip and the target for it is supposed to be some div. I want tooltip to be always on the bottom of the main container. Unfortunately the tooltip appears on the bottom of the element that is inside of main container (is its children).

<div id='tootlipTarget'>
  <div>another div</div>
  <p>some text paragraph</p>
  <div>yet another div</div>
</div>
<Tooltip placement='bottom' target='tootlipTarget'>
  tooltip text
</Tooltip>

How it works:

How it should always appear (on hover on whole container, both another div and paragraph):

Answer 1

how are you?

That's because the target is positioned above the containing div, so it is applied to the bottom of the containing div. You should indicate the target in the content, like so:

<div>
   <div id='tootlipTarget'>another div</div>
   <p>some text paragraph</p>
   <div>yet another div</div>
</div>