鼠标移出图标后Callout未关闭，事件使用问题求助

Hey there! Let's figure out what's going on with your tooltip callout.

First, the issue with the callout not hiding when you move the mouse away from the <i> icon: your current jQuery code only uses one function with hover(). In jQuery, hover() actually takes two functions—one for when the mouse enters the element, and one for when it leaves. Right now you're only handling the "enter" part, so there's no code to hide the callout when you move away.

Then the flickering problem when switching to mouseover and mouseleave: that happens because your callout is a separate element from the <i> icon. When you move your mouse from the icon to the callout, you're technically leaving the icon's area first—so mouseleave triggers and hides the callout immediately. But then your mouse is over where the callout was, which might not trigger any event to show it again, causing that annoying flicker.

Here's the fix, broken down step by step:

1. Adjust the HTML structure: Move the callout inside the .text-with-tooltip container. This way, when you hover over the callout, you're still hovering over the parent container, so the mouseleave event won't fire prematurely.
2. Update the CSS positioning: Since the callout is now inside the parent, we need to adjust its position to sit below the text instead of using absolute positioning relative to the whole page.
3. Fix the jQuery hover logic: Use both handler functions for hover() to show/hide the callout, and target the callout inside the hovered parent to avoid affecting other tooltips if you add more later.

Here's the modified code:

HTML #

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="tooltip-wrapper">
  <div class="text-with-tooltip">
    Manual<i class="fas fa-info-circle"></i>
    <!-- Move callout inside the text container -->
    <div class="callout top callout-tooltip">You must enter the request number every time you add new entry on Reimbursement Entry</div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS #

.text-with-tooltip {
  font-size: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Add this to make the parent a positioning context for the callout */
  position: relative;
}

.text-with-tooltip i {
  margin-left: 4px;
  font-size: 11px;
}

.callout.callout-tooltip {
  height: 60px;
  width: 200px;
  background-color: rgba(0,0,0,0.8);
  color: #ccc;
  padding: 8px;
  padding-bottom: 4px;
  border-radius: 3px;
  min-height: 50px;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  text-align: center;
  font-size: 12px;
  position: absolute;
  /* Position below the parent text */
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.callout.callout-tooltip::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.callout-tooltip.top::before {
  /* Adjust arrow to point up to the text */
  left: 45%;
  top: -20px;
  border-bottom: 10px solid rgba(0,0,0,0.8);
  border-top: none;
}

.tooltip-wrapper {
  height: 400px;
  width: 100%;
}

JavaScript #

// Use both handler functions for hover: enter and leave
$(".text-with-tooltip").hover(
  function() {
    // Show the callout inside the hovered container
    $(this).find(".callout-tooltip").show();
  },
  function() {
    // Hide the callout when leaving the container
    $(this).find(".callout-tooltip").hide();
  }
);

This setup will keep the callout visible as long as your mouse is over either the icon or the callout itself, and hide it only when you move away from both. No more flickering, and the callout behaves exactly as expected!

内容的提问来源于stack exchange，提问作者Dolorosa