英文:

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

问题 {#heading}

我正在面临一个与CSS工具提示相关的问题，其中当鼠标从触发元素移动到工具提示内容时，工具提示会意外关闭，尤其是当两个元素之间有间隙或空白时。工具提示是在悬停在触发元素上时触发显示的，但我希望当鼠标在触发元素和内容区域之间移动时它保持打开状态。

我已经尝试调整定位和使用:hover状态，但工具提示在这种特定情况下仍然消失。是否有一种方法可以防止鼠标在触发和内容元素之间时关闭工具提示？

我尝试添加background-image: linear-gradient(green, green);（颜色可以更改为透明）来防止工具提示内容关闭，但这不是一个好的解决方案，因为我需要一个填充/边距来覆盖触发元素和内容元素之间的空间，但它也在该部分触发元素和其余文本之间添加了间隙。

任何帮助将不胜感激。

.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;
}

<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</span>
  </span>
</div>

英文:

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 -->

答案1 {#1}

得分: 1

你可能需要使用填充（padding）而不是外边距（margin），这样你就可以在将鼠标移动到工具提示内容上的同时保持在父元素中悬停。

下面我添加了一个额外的 span 元素来用于工具提示的样式，初始工具提示具有位置和填充。

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

.trigger-element {
  /* 背景图片: linear-gradient(green, green);
  背景大小: 100% 50%;
  背景重复: 不重复; */
  /* 填充: 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;
}

<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>

英文:

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 -->