console.clear();

$(document).ready(function () {

  // Search for text if it's simple in the HTML

  var $dataElements = $("[data-over]");

  $dataElements.each(function (index, el) {

    var $el = $(el);

    var text = $el.attr("data-over");

    if (text) {

      // Split by "|"

      text = text.split("|");

      createDataOver($el, text);

    }

  });

  // Or provide it yourself.

  var $testData = $(document.createElement("span"));

  $testData.text("Click me.").click(function () {

    alert("Clicked");

  })

  createDataOver($("#test"), $testData);

});

​

function createDataOver($el, data) {

  var $holder = $(document.createElement("div"));

  $holder.addClass("over hidden");

  // Check if we provided JQuery or a string array

  if (data instanceof jQuery) {

    // Manually make it relatively positioned

    $el.css("position", "relative");

    data.addClass("over-line");

    $holder.append(data);

  }

  else {

    data.forEach(function (line) {

      var $line = $(document.createElement("span"));

      $line.text(line);

      $line.addClass("over-line");

      $holder.append($line);

    });

  }

​

  // append with the hidden class to start

  $el.append($holder);

  // Create a closure with a timeout variable

  // So it doesn't disappear immediately if

  // we don't want it to!

  (function closure() {

    var timeoutCancel = -1;

    $el.mouseenter(function () {

      if (timeoutCancel !== -1) {

        clearTimeout(timeoutCancel);

        timeoutCancel = -1;

      }

      $holder.removeClass("hidden");

    });

    $el.mouseleave(function () {

      timeoutCancel = setTimeout(function () {

        if (timeoutCancel !== -1)

        $holder.addClass("hidden");

      }, 500);

    });

  }());

}