Mouse cursor hovering above tooltip closes it again

I have some custom css code to position the tip near the div that launches it, see attached screenshot.
The css rule is as follows:

form fieldset .formtips-processed,
.formtips-processed,
form .form-item div.formtips-processed {
  position: absolute;
  background-color: white;
  color: black;
  padding: 5px;
  border: 2px solid #FBB218;
  border-radius: 6px;
  z-index: 100;
  top: -25px;
  left: 50px;
}

So, if you set formtips to "hover", after hovering above the help icon the tooltip appears and is positioned directly above the help icon, covering it. Therefore the mouse is not within the icon any more, but within the tooltip, and therefore the .out function is called, causing the tooltip to pop in-out-in-out periodically.

I don't know how to solve this. I know that my "fault" was to position it there using css, but that is intended. ideally I would like to have it positioned right to the help icon. but as the form help normally is BELOW the form-item, I dont have a connexivity between the icon and the help, so I can't position it relative/absolute to it.

A possible solution would be to trigger the .out function only IF the mouse is not inside the tooltip. This would make much sense as people unconschiously move the mouse where they read. So hide the popup when the help icon is left AND the balloon tip is left.
Just my 2 cents.