<div class="open-ot-alert">Click to View</div>
<div class="more-ot-alert">
  <span class="close-ot-alert">
    <i class="fa fa-close"></i>
  </span>
  <p>There is more OT in the upcoming weeks. 
    Scan your calendar to see it.</p>
</div>
$color: orange;
$c-dark: darken($color, 15%);
$c-dark-2: darken($color, 25%);

body { background: #444; }
.show-me {display: block;}
.open-ot-alert {
  font-family: Helvetica,Arial,sans-serif;
  color: #ccc;
  font-size: 2rem;
  font-weight: bold;
  width: 30rem;
  text-align: left;
  margin: 3rem auto;
  padding: 1rem;
  line-height: 2rem;
  background-color: $c-dark-2;
  &:hover{ cursor: pointer; background-color: $c-dark;}
}
.open-ot-alert p {color: #444;}
.more-ot-alert {
  display: none;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 10px;
  background-color: #eee;
  border: 2px solid #9e9e9e;
  height: 4.2rem;
  width: 12rem;
  transform: translateZ(0);
  animation: move .4s ease 3;
  position: absolute;
  top: 38px;
  left: 50%;
  z-index: 55;
  p {
    font: 16px Arial;
    line-height: 18px;
    line-height: 1.2rem;
    margin-top: 0;
  }
}
.more-ot-alert:before {
  content: "";
  position: absolute;
  top: 24px;
  left: -15px;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #9e9e9e;
  display: block;
  width: 0;
  z-index: 1;
}
.more-ot-alert:after {
  content: "";
  position: absolute;
  top: 27px;
  left: -12px;
  border-style: solid;
  border-width: 12px 12px 12px 0;
  border-color: transparent #eee;
  display: block;
  width: 0;
  z-index: 1;
}
.more-ot-alert .close-ot-alert {
  font-size: 15px;
  font-size: 1rem;
  clear: both;
  cursor: pointer;
  float: right;
  margin: -5px -3px 0 0;
}
.more-ot-alert .close-ot-alert i {
  color: #999;
}
.more-ot-alert .close-ot-alert i:hover {
  color: #cc0000;
}
@keyframes move {
  50% { transform: translate(10px, 0); }
}
View Compiled

  function closeAlert() {  
    setTimeout(function () {
      $(".more-ot-alert").fadeOut("fast");
    }, 100);
  }
  function openAlert() {
    $(".more-ot-alert").fadeIn("fast");
    // IE8 animation polyfill
    if ($("html").hasClass("lt-ie9")) {
      var speed = 300;
      var times = 3;
      var loop = setInterval(anim, 300);
      function anim() {
        times--;
        if (times === 0) { clearInterval(loop); }
        $(".more-ot-alert").animate({ left: 450 }, speed ).animate({ left: 440 }, speed );
        //.stop( true, true ).fadeIn();
      };
      anim();
    };
  }
  $(".close-ot-alert").on("click", function () {
    closeAlert()
  });

  $(".open-ot-alert").on("click", function () {
    openAlert();  
  });

  $(document).keydown(function(e) {
    if (e.keyCode == 27) { closeAlert(); }
    if (e.keyCode == 67) { openAlert(); } // C is for click?
  });

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js