CSS Tooltip Closes When Moving from Trigger Element to Content with Gap

I'm facing an issue with CSS tooltips where the tooltip closes unexpectedly when moving the mouse from the trigger element to the tooltip content, especially when there is a gap or space between the two elements. The tooltip is triggered to appear on hover over the trigger element, but I want it to stay open when the mouse moves between the trigger and the content area.

I've tried adjusting the positioning and using :hover states, but the tooltip still disappears in this specific scenario. Is there a way to prevent the tooltip from closing when the mouse is between the trigger and content elements?

I tried to add background-image: linear-gradient(green, green); (color could be changed to transparent) to prevent tooltip content closing but it is not a good solution since i need a padding/margin to cover the space between trigger and content elements, but it adds a space between trigger element and rest of the text in the section as well.

Any help will be appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.tooltip-container {
  position: relative;
  display: inline-block;
  margin-top: 100px;
}

.trigger-element {
  /* background-image: linear-gradient(green, green);
  background-size: 100% 50%;
  background-repeat: no-repeat; */
  /* padding: 20px; */
  position: relative;
  margin-top: 20px;
}

.trigger-element:hover .tooltip-content {
  display: block;
}

.tooltip-content {
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  bottom: 100%;
  z-index: 1;
  margin-bottom: 30px;
  left: 0;
}

.tooltip-content .content {
  max-height: 20px;
}

<!-- language: lang-html -->

<div class="tooltip-container">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quod
      adipisci, ratione, iusto neque alias tempora, asperiores vero nam
      molestiae consequatur enim facere eius? Veniam ducimus non temporibus
      laborum nostrum.
      <span class="trigger-element">Hover me
        <span class="tooltip-content">Tooltip content</div>
      </span>
    </div>

<!-- end snippet -->

You would probably need to use padding instead of margin so you can remain hovering in your parent during the time you move your mouse to the tooltip content.

Below I have added an extra span for the tooltip styling and the initial tootip has the position and padding

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.tooltip-container {
  position: relative;
  display: inline-block;
  margin-top: 100px;
}

.trigger-element {
  /* background-image: linear-gradient(green, green);
  background-size: 100% 50%;
  background-repeat: no-repeat; */
  /* padding: 20px; */
  position: relative;
}

.trigger-element:hover .tooltip-content {
  display: block;
}

.tooltip-content {
  display: none;
  position: absolute;
  padding-bottom: 30px;
  z-index: 1;
  left: 0;
  bottom: 100%;
}


.tooltip-content > span {
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  display:block;
}

.tooltip-content .content {
  max-height: 20px;
}

<!-- language: lang-html -->

<div class="tooltip-container">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quod
      adipisci, ratione, iusto neque alias tempora, asperiores vero nam
      molestiae consequatur enim facere eius? Veniam ducimus non temporibus
      laborum nostrum.
      <span class="trigger-element">Hover me
        <span class="tooltip-content"><span>Tooltip content</span></span>
      </span>
    </div>

<!-- end snippet -->