0

I'm trying to create a tooltip that fades in and when it's hovered over using jQuery.

I want the tooltip to appear if the user hovers over the trigger, but to also remain visible if the cursor is moved over the tooltip after it appears.

$('#icon').hover(
  function() {
    $('#tooltip').fadeIn();
  },
  function() {
    $('#tooltip').fadeOut();
  }
)
body {
  text-align: center;
}

#credit {
  position: relative;
  display: inline-block;
  margin-top: 25px;
}

#tooltip {
  position: absolute;
  width: 120px;
  background-color: yellow;
  padding: 10px;
  top: 100%;
  left: 50%;
  margin-left: -65px;
  margin-top: 5px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="credit">Hover me–><svg id="icon" width="15" height="15">
  <rect width="15" height="15" fill="blue"/>
</svg>
  <div id="tooltip"><a href="">Website link #1</a><br></div>
</div>

At the moment the tooltip disappears unless the cursor is over the trigger. Does anyone know how to solve this?

wrgt
  • 158
  • 10
  • for work arround you can do it like this $('#tooltip').fadeIn().delay(3000).fadeOut(); – Nitin Daddikar Apr 29 '20 at 14:38
  • Does this answer your question? [Only close tooltip if mouse is not over target or tooltip](https://stackoverflow.com/questions/16660576/only-close-tooltip-if-mouse-is-not-over-target-or-tooltip) – matthias_h Apr 29 '20 at 19:36

0 Answers0