some bubble fun

bubble.html

<title>some bubble fun</title>


<style>

  body {
    font-family: Arial;
    padding-top: 10%; padding-left: 30%;
  }

  .bubble {
    border: 1px solid black;
    border-radius: 8px 2px;
    padding: 4px 9px;
    margin: 10px 0 0 10px;
    cursor: pointer;
  }

  .bubble:after {
    visibility: hidden; opacity: 0;
    position: absolute;
    content: attr(title);
    background: black;
    color: white;
    margin: 25px 0 0 -80px;
    padding: 2px 5px;
    text-align: center;
    left: auto; top: auto;
    border-radius: 2px 8px;
    transition: all 0.5s ease;
  }

  .bubble:hover:after {
    visibility: visible; opacity: 1;
  }

  .bubble-open:after {
    visibility: visible; opacity: 1;
    width: 300px; height: 80px;
    padding-top: 32px;
    font-size: 45px;
    border-radius: 2% 30%;
  }

</style>


<span class="bubble" title="tiptool">some bubble fun</span>


<script>
  (function(window, doc, undefined) {

    var bubbles = doc.getElementsByClassName('bubble');

    each(bubbles, openOnClick);

    function each (arr) {
      return Array.prototype.forEach.apply(
        arr, Array.prototype.slice.call(arguments, 1)
      );
    }

    function openOnClick(bubble) {
      bubble.addEventListener('click', function(event) {
        event.target.classList.add('bubble-open');
      });
    }

  })(window, document);
</script>