How to create a div which disappears after a time, but hovering will keep it?

Question

I am trying to create a notification which will pop up, then disappear after a few seconds, but I want the user to be able to hover over it with the mouse to keep it from disappearing. If I could I'd like to also have a click make it disappear, but that's not necessary. I'm not sure how I could have the hover in html interact with the embedded ruby to stop the timeout. I'm aware I might need to restructure the whole thing to make it work. Here's the relevant css and html/erb snippets (not enough to run):

setTimeout(function() {
  $('#alert_box').fadeOut('fast');
}, 3000);

.alert_wrap {
  padding: 0px 50px;
  margin-top: 3px;
  height: 5%;
  background-color: rgba(255, 0, 0, .3);
  border: 3px solid red;
  grid-row-start: 2;
  justify-self: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<% unless notice == nil %>
<div id="alert_box" class="alert_wrap">
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
</div>
<% end %>

Answer 1

var myTimeOut = setTimeout("mytimeoutfunction()", 3000);
$('#alert_box').mouseout( function () {
  myTimeOut = setTimeout("mytimeoutfunction()", 3000)
});

$('#alert_box').mouseover( function () {
  clearTimeout(myTimeOut);
});

var mytimeoutfunction = function () {
  $('#alert_box').fadeOut('fast');
}

// On click, fadeout
$("#close").click(mytimeoutfunction);

.alert_wrap {
 padding: 0px 50px;
 margin-top: 3px;
 height: 5%;
 background-color: rgba(255, 0, 0, .3);
 border: 3px solid red;
 grid-row-start: 2;
 justify-self: center;
}
#alert_box {
  position: relative;
}
#close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert_box" class="alert_wrap">
 <p class="notice">This is notice text</p>
 <p class="alert">This is alert text</p>
    <span id="close">X</span>
</div>

In the first step you can use setTimeout and then on mouseover or hover event, you can clear the timeout function using clearTimeout and thus the fadeout will not take effect.

And on mouseout you can again use the setTimeout to start counting for 3 seconds.

Also since you have mentioned about the click event, I have added a close button that on click can call the timeout function straight away.

Answer 2

You could approach it with CSS animations:

.alert_wrap {
  padding: 0px 50px;
  margin-top: 3px;
  height: 5%;
  background-color: rgba(255, 0, 0, .3);
  border: 3px solid red;
  grid-row-start: 2;
  animation: alert 4s linear none;
  opacity: 0;
  transition: all .3s ease-in-out;
}

@keyframes alert {
  0%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
}

.alert_wrap:hover {
  opacity: 1;
}

<div class="alert_wrap">
  <p>Some alert</p>
</div>

Answer 3

Something like this may also work, but I would probably do this with CSS transitions (again using :not(:hover) pseudo selector)

var handler = setInterval(hideBox, 100); // interval function

function hideBox() {
  if ($('.alert_wrap:not(:hover)').length) { // check if the alert is visible and not hovered
    setTimeout(function() { // after 3 seconds
      if ($('.alert_wrap:not(:hover)').length) { // if not hovered yet
        $('.alert_wrap:not(:hover)').fadeOut('fast');
        clearInterval(handler);
        handler = 0;
      }
    }, 3000);    
  }
}